将json文件从捆绑到Vue中排除

Question

我试图从JSON中排除JSON文件。我读了这个答案，但它并没有真正帮助我做我想做的事。

我从头开始创建了一个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 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