我很遗憾这个问题:

在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
                }
            }
        ])
    ]
}

所以在这里我没有想法如何实现上述设置 . 谢谢您的帮助!