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：

要动态导入模块，import关键字可以为称为函数。当以这种方式使用时，它返回一个promise。

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

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

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