排除 json 文件捆绑在 Vue 中

Question

我正在尝试将 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 文件夹中保持单独的文件。

据我了解，我需要使用externalsconfiguration 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