Question

我下面的代码运行正常：

import Vue from 'vue';
import Vuex from 'vuex';

import user from './modules/auth';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        user
    }
 });

有没有更短的方法来导入模块，而不是在顶部编写语句？相反，我将其直接写在模块内部，如下所示：

export default new Vuex.Store({
    modules: {
        user: import('./modules/auth'),
    }
 });

但是不幸的是，它没有用（外部模块未成功导入）。

Answer 1

Import带括号的情况与import不带括号的情况不同-后者不带括号-静态导入模块（在编译时），而前者动态导入模块（在运行时），并且不是ES6功能但是Webpack特有的。

您可以在Webpack documentation中阅读更多内容，但最重要的是动态导入（带有花括号的输入）返回Promise而不是模块引用。 Promise解决后，模块参考将可用。您可以在本文https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976

中阅读有关延迟加载Vuex模块的更多信息。

如何在Vue中导入外部模块？

1 个答案: