我很遗憾这个问题:
在vue.js中,我想动态加载一个事先可能不知道的组件 . 这是由于计划应用程序所需的模块化:基本的vue应用程序应该通过模块化代码扩展,例如:取决于来自数据库的一些参数 .
所以,假设应用程序目录看起来像这样:
.
├── src //the main application
| ├── components
| │ ├── App.vue
| └── index.js
└── modules
├── Module1
│ └── ExampleComponent.vue
├── Module2
└── ...
主要想法是App.vue加载例如通过AJAX进行菜单配置并将其显示为异步组件 .
// App.vue
<template>
<div class="container">
<async-component v-bind:is="component"></async-component>
</div>
</template>
// [...]
axios.get("/getComponent")
.then((response) => (
this.component = window.Vue.component('component', (resolve) => {
import(response.data["component"]).then(loadedComponent => {
resolve(loadedComponent.default);
});
});
)
// [...]
这(当然这里缩短了)代码或多或少有效,但只有在组件获得固定导入时才有效 . 在所有其他情况下,Webpack似乎忽略了所有其他现有的vue文件 . 我已经尝试(除其他外)通过以下方式禁用死代码删除:
// [... webpack.config ...]
optimization: {
sideEffects: false,
minimizer: [
new UglifyJsPlugin([
uglifyOptions: {
compress: {
unused: false,
dead_code: false
}
}
])
]
}
所以在这里我没有想法如何实现上述设置 . 谢谢您的帮助!