Vue CLI 从项目模块动态导入

Question

我知道可以像这样从捆绑的 webpack 文件中导入组件

import {componentA, componentB} from '../component.bundle';

是否可以实现与动态导入相同的效果，像这样。

const url = '${window.location.origin}/assets/default/js/bundle/vue_data.bundle.js';
        this.getAxiosInstance().get(url).then(response => {
                const {Add, Edit, Filter, View} =  () => import(response.data);
        });

如果是，请问如何？谢谢

Answer 1

是，使用 dynamic imports:

To dynamically import a module, the import keyword may be called as a function. When used this way, it returns a promise.

我从您的 url 示例中假设您的导入位于项目的 assets 目录中（即 src > assets），而不是实际在外部域中。在这种情况下，您不需要 axios。你会这样做：

const path = 'assets/default/js/bundle/vue_data.bundle.js';
import('@/' + path).then(module => {
  const {Add, Edit, Filter, View} = module;
});

您需要对 @/ 部分进行硬编码，否则会出现问题，例如如果你试图用 const path = '@/assets/default/js/bundle/vue_data.bundle.js'

做 import(path)

Vue CLI 从项目模块动态导入

Vue CLI dynamic import from project module

import

webpack

vue.js

es6-modules

vue-cli