我试图将 JSON 文件排除在 Vue 中的捆绑之外。我读了this answer但它并没有真正帮助我做我想做的事。
我从头开始创建了一个 Vue 项目:
vue create hello-world
我在 view
文件 Home.vue
中添加了一个 import
所以现在它看起来像这样:
<template>
<div>
<div v-html="message"></div>
</div>
</template>
<script>
import jsonData from '../assets/test.json'
export default {
name: 'home',
data () {
return {
message: jsonData
}
}
}
</script>
整个项目结构开箱即用,如下所示:
因此,如果我将使用 npm run build
,它会被打包到 dist\js\app.ab0cf9cb.js
中,这是预期的,我希望它保持独立dist
文件夹中的文件。
据我所知,我需要使用externals
configuration from webpack ,在我的例子中意味着我需要创建一个 vue.config.js
并以正确的方式修改它。
我确实用 vue.config.js
做了一些尝试,例如:
module.exports = {
configureWebpack: {
externals: {
jsonData: '../assets/test.json'
}
}
}
并将导入更改为 import jsonData from 'jsonData'
但没有成功
我的问题是:
我到底应该在 vue.config.js
中放入什么来排除这个文件?或者,更笼统地说,我应该怎么做才能排除这个文件?
最佳答案
根据您的具体需求,最简单的解决方案可能是将文件放在公共(public)文件夹中。
Webpack 不会处理这些,只是将它们移动到保持文件夹结构的 dist 文件夹中。无需配置。
/public/assets/test.json
查看有关静态 Assets 的更多信息 https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder
关于vue.js - 排除 json 文件被捆绑在 Vue 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56695296/