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");
}

如何在VueJs中包含JSON文件而不进行编译

1 个答案: