vue.js - 排除 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 文件夹中的文件。

据我所知，我需要使用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

根据您的具体需求，最简单的解决方案可能是将文件放在公共(public)文件夹中。

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

/public/assets/test.json

查看有关静态 Assets 的更多信息 https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder