如何在不编译的情况下在 VueJs 中包含 JSON 文件

Question

我正在尝试创建一个新的 VueJs 应用程序，但我遇到了各种各样的问题。我有一个大型 JSON 文件，其中包含一组对象，我根据搜索条件显示，但这会生成一个太大的 app.js 文件。启动应用程序的时间过长。

目前我将其导入为：

import SpellStore from '../store/spells.json'

这里是完整的组件：

<script>
import SpellBlock from '../components/SpellBlock.vue'
import SpellStore from '../store/spells.json'
export default {
    name: 'Spells',
    components: {
        SpellBlock
    },
    computed: {
        count: function () {
            return this.$store.state.count
        },
        spells: function () {
            var result = SpellStore
            if (this.filter.text) {
                result = result.filter(m => !m.name.toLowerCase().indexOf(this.filter.text.toLowerCase()))
            }
            return result;
        },

    },
    data(){
        return {
            maxResults: 50,
            filter: {
                text:'',
            },
          }
      }
};

问题： 当我为生产构建时，它会生成一个大约 12Mb 的 app.js 文件，只是因为 json 文件非常大。当我查看 app.js 的源代码时，我实际上可以在那里看到整个 json 对象。我的应用程序中没有太多其他内容。我不想在不需要这个大文件时给所有用户带来负担。如何仅在需要时加载此文件？我对谷歌也没有任何运气。我该如何处理？

已解决

async mounted() {
    await import("../store/spells.json")
        .then(({default: json}) => {
            this.SpellStore = json;
        });
    }

Answer 1

我认为您可以通过 require import

实现这一目标

async mounted() {
  this.SpellStore = await import("../store/spells.json");
}