Question

Vue版本：2.4.2
webpack的版本：2.6.1

任务是......我有一个组件。它获取全局变量，一个字符串。并且取决于这个变量，它应该动态加载并显示七个非常重的组件之一。在我看来，由于它们的重量而导入它并不是一个好主意。

现在我做了这样的导入：

import comp1 from '@/components/comp1.vue';
import comp2 from '@/components/comp2.vue';

export default {
    components: {comp1, comp2}
...
}

在模板中我们会像<comp1></comp1>一样使用它而这不是我想要的。输出文件非常大，我必须继续前进。

我试过像docs中描述的那样：

export default {
    components: {comp1: () => import('@/components/comp1.vue')}
...
}

A-a-我们有一个错误：

[Vue warn]: Failed to resolve async component: function comp1() {
  return __webpack_require__.e/* import() */(1).then(__webpack_require__.bind(null, 37));
}
Reason: Error: Loading chunk 1 failed.

最初的想法是：

let param = window.GLOBAL_PARAM;
let str = '@/components/comp2.vue';
switch(param) {
    case 1: {
        str = '@/components/comp1.vue';
        break;
    }
    case 2: {
        str = '@/components/comp3.vue';
        break;
    }
    ...
}

export default {
    components: {comp: () => import(str)}
...
}

但我有一个错误：

[Vue warn]: Failed to resolve async component: function comp() {
  return __webpack_require__(50)(componentPath);
}
Reason: Error: Cannot find module '@/components/comp2.vue'.

据我了解，我的webpack存在问题，无法解析“@”符号

所以，问题是：

如何修复我的组件的异步加载？也许我做了一个我的代码中的错误？
如何根据某些条件（组件中的全局变量或参数）以正确的方式组织加载七个组件中的一个。也许有一些webpack偏好和/或一些插件。或者也许我应该通过其他方法来解决这个问题？

VueJS动态/异步加载组件

0 个答案: