Vue中基于Module Federation实现跨团队组件嵌入预览的方案探讨

1. 反向Module Federation（B作为Host，A作为Remote） #

不用改动Website A的现有结构，B团队直接在本地开发环境中把A作为远程模块引入：

• 在B的Webpack配置里，将A的开发服务器地址配置为Remote，暴露A中需要嵌入Component-B的页面/容器组件
• 在B的本地项目里，加载A的容器组件，通过Vue的动态组件、手动挂载或者A预留的组件注入点，把Component-B嵌入进去
• 优势：A团队无需修改现有代码，B团队独立完成开发环境搭建，完全模拟真实嵌入场景

2. 本地上下文模拟（结合Storybook） #

如果A的基础UI、全局样式和状态逻辑比较稳定，B团队可以直接模拟A的运行上下文：

• 把A的基础UI组件包、全局样式文件、主题变量导入到B的本地项目
• 用Storybook搭建Component-B的预览环境，在Story中模拟A的页面布局、路由参数、Pinia/Vuex状态等上下文
• 优势：不依赖A的开发服务器，开发速度更快，还能同时做组件的文档化和测试

3. 共享开发服务器（A加载B的远程组件） #

让A的开发服务器动态加载B的本地组件：

• A团队在Dev Server的Module Federation配置中，添加B的本地开发地址作为Remote
• B团队把Component-B配置为Module Federation的暴露模块
• 启动A和B的开发服务器后，A的页面会自动加载B的组件，B修改代码时A的页面实时更新
• 优势：完全贴合线上真实环境，无需模拟，双方开发同步，调试效率最高

对比你当前的方案，这几个方案都不需要大规模改造Website A的结构，更灵活且对现有业务影响更小，可以根据团队的协作模式和项目复杂度选择合适的方案。

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