Vue3+Module Federation微前端同名App.vue组件冲突如何解决

两个应用的./components/App.vue模块标识（开发环境默认用文件路径作为模块ID）完全一致，在Module Federation的共享作用域下被判定为同一个模块，优先加载了container侧已初始化的同名模块导致覆盖。

1. 配置全局唯一的构建标识 #

分别给两个应用的webpack配置output.uniqueName字段，值和Module Federation插件的name字段保持唯一：

// container webpack配置
module.exports = {
  output: {
    uniqueName: 'container'
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      // 其余原有配置保持不变
    })
  ]
}

// auth webpack配置
module.exports = {
  output: {
    uniqueName: 'auth'
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'auth',
      // 其余原有配置保持不变
    })
  ]
}

2. 调整模块ID生成规则 #

避免开发环境下相同路径的文件生成重复ID：

// 两个应用的webpack配置均添加
module.exports = {
  optimization: {
    // 根据内容哈希生成全局唯一的模块ID，路径相同也不会冲突
    moduleIds: 'deterministic'
  }
}

3. 调整共享规则排除本地业务组件 #

不要将本地业务组件路径加入共享配置，如之前配置了全局共享规则，手动排除对应路径：

// ModuleFederationPlugin的shared配置
new ModuleFederationPlugin({
  // 其余原有配置
  shared: {
    vue: { singleton: true, eager: true },
    // 其他需要共享的第三方依赖
    // 明确排除本地业务组件，禁止跨应用共享
    './components/App.vue': { shareScope: 'false', requiredVersion: false }
  }
})

完成以上配置后重启两个应用即可解决同名组件覆盖问题。

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