Vue3 CLI搭配Webpack Module Federation组件从错误宿主加载问题

这个是Vue CLI与Webpack Module Federation配合时的常见配置问题，不属于未知bug：
Vue CLI默认会将webpack的publicPath设置为/，组件提供方打包输出的异步chunk没有绑定自身服务的域名前缀，宿主加载远程chunk时会默认使用当前宿主的域名拼接路径，就出现了你遇到的从8000端口加载远程组件的问题。

你只需要修改**组件提供方（运行在8001端口的项目）**的配置即可：

方案1：显式配置publicPath（推荐） #

修改组件提供方的vue.config.js，新增publicPath配置项，开发环境写死为8001的完整服务地址，生产环境替换为实际部署的域名路径即可：

const { ModuleFederationPlugin } = require('webpack').container

module.exports = {
  // 新增这一行，注意结尾要带斜杠
  publicPath: process.env.NODE_ENV === 'development' ? 'http://localhost:8001/' : '/你的生产环境部署路径/',
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: 'component',
        filename: 'remoteEntry.js',
        remotes: {},
        exposes: {
          './HelloWorld': './src/components/HelloWorld.vue'
        },
        // 建议补充共享配置，避免多Vue实例冲突
        shared: {
          vue: {
            singleton: true,
            requiredVersion: require('./package.json').dependencies.vue
          }
        }
      })
    ]
  }
}

方案2：动态设置publicPath #

如果不方便写死配置，也可以在组件提供方的入口文件src/main.js的最顶部添加以下代码：

/* eslint-disable no-undef */
__webpack_public_path__ = process.env.NODE_ENV === 'development' ? 'http://localhost:8001/' : '/你的生产环境部署路径/'

配置修改完成后重启两个项目，远程组件就会从8001端口正常加载了。

内容的提问来源于stack exchange，提问作者looper