[vue]Failed to resolve async component: function Header()
Failed to resolve async component: function Header()problem想要使用 webpack ModuleFederationPluginvue-cli5vue2webpack5功能app1(8080) provider 提供Header组件app2(8081) consumer 消费Header组件配置 webpackapp1 成功 export
·
Failed to resolve async component: function Header()
problem
想要使用 webpack ModuleFederationPlugin
- vue-cli5
- vue2
- webpack5
功能
- app1(8080) provider 提供Header组件
- app2(8081) consumer 消费Header组件
配置 webpack
- app1 成功 export http://localhost:8080/remoteEntry.js
- app2 成功 request http://localhost:8080/remoteEntry.js
- 但是 app2 fail to resolve app1 Header组件 报错信息如下
Failed to resolve async component: function Header()
Reason: ScriptExternalLoadError: Loading script failed.
Missing: http://localhost:8080/remoteEntry.js
While loading “./Header” from webpack/container/reference/app
reason
ref https://github.com/vuejs/vue-cli/issues/6318
- a conflict between splitChunks and webpack module federation
- After deleting splitChunks config, module federation works
solution
就是说 webpack splitChunks 和 webpack module federation 有冲突,删除splitChunks即可解决
chainWebpack: (config) => {
/* module federation plugin import */
config.optimization.delete('splitChunks')
config
.plugin('module-federation-plugin')
.use(require('webpack').container.ModuleFederationPlugin, [{
// name: 唯一ID
name: "app1",
// filename:提供给其他服务加载的文件
filename: "remoteEntry.js",
// library: 其中这里的 name 为作为 umd 的 name
library: { type: "var", name: "app1" },
// exposes: 暴露模块
exposes: {
'./Header': "./src/components/Header",
}
// shared: 共享依赖包
}])
}
chainWebpack: (config) => {
/* module federation plugin import */
config.optimization.delete('splitChunks')
config
.plugin('module-federation-plugin')
.use(require('webpack').container.ModuleFederationPlugin, [{
name: "app2",
filename: "remoteEntry.js",
remotes: {
app1: "app1@http://localhost:8080/remoteEntry.js",
}
}])
}
更多推荐
所有评论(0)