排除将json文件捆绑在Vue中

Question

我正在尝试将JSON文件从捆绑在Vue中排除。我读了this answer，但它并没有真正帮助我做我想做的事。

我从头开始创建了一个Vue项目：

vue create hello-world

并且我在import文件view中添加了Home.vue，所以现在看起来像这样：

<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中放入什么来排除此文件？或者，更笼统地说，我应该怎么做才能排除此文件？

Answer 1

根据您的特定需求，最简单的解决方案可能是将文件放在公用文件夹中。

Webpack不会处理这些，而只是将它们移动到dist文件夹，以保持文件夹结构。无需配置。

/public/assets/test.json

查看有关静态资产https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

的更多信息