1. 访问主应用 : http://localhost:8080
2. 访问 Vue 子应用 : http://localhost:8080/vue-app
3. 访问 React 子应用 : http://localhost:8080/react-app
测试以下功能:
- ✅ 主应用与子应用之间的路由跳转
- ✅ 子应用与子应用之间的路由跳转
- ✅ 主应用与子应用之间的通信(全局状态同步)
- ✅ 子应用与子应用之间的通信(通过主应用中转)
- ✅ 页面刷新后全局状态不丢失
关键问题总结

企业级最佳实践
1. 状态管理 :使用中心化状态管理,所有子应用通过主应用的 actions 进行通信
2. 通信方式 :优先使用 window 对象共享,避免 props 传递的复杂性
3. 路由跳转 :使用 window.location.href 确保路由正确切换
4. 状态持久化 :使用 localStorage 或 sessionStorage 保存关键状态
5. 生命周期管理 :正确实现 bootstrap 、 mount 、 unmount 钩子
6. 错误处理 :添加 try-catch 和错误日志,便于排查问题
7. 开发环境配置 :确保子应用端口与主应用注册时一致,配置跨域
8. 生产环境配置 :使用 CDN 地址作为子应用入口,配置正确的路径
部署建议
1. 主应用 :部署到主域名(如 https://example.com )
2. 子应用 :部署到子域名或 CDN(如 https://vue.example.com , https://react.example.com )
3. 配置管理 :使用环境变量管理不同环境的配置
4. 版本控制 :为每个子应用添加版本号,便于灰度发布和回滚
5. 监控告警 :添加应用性能监控和错误告警

448

被折叠的 条评论
为什么被折叠?



