微前端子应用通信应通过主应用提供的事件总线和共享状态接口解耦，开发时用mock实现替代真实通信模块，配合依赖注入和msw拦截实现独立开发与测试。
在微前端架构中，子应用间通信本就不该强依赖彼此的运行时状态或具体实现。Mock 机制在这里不是用来“模拟接口”，而是作为解耦通信契约、隔离真实依赖、支持独立开发与测试的手段。关键不在于“怎么 mock”，而在于“在哪 mock”和“mock 什么”。
明确通信边界：只 Mock 共享状态与事件总线
微前端子应用之间不应直接调用对方方法或访问对方 store。主应用应统一提供通信契约，例如：
- 一个轻量级事件总线（如
EventBus），用于发布/订阅跨应用消息 - 一个可读写共享状态对象（如
globalState），含get/set/onChange方法
这些接口就是 Mock 的目标——不是 mock 某个子应用的 API，而是 mock 主应用提供的通信基础设施。
开发阶段用 Mock 实现替代真实通信模块
在子应用本地开发时（比如单独启动 http://localhost:8081），它拿不到主应用注入的 props。此时可借助 Mock 机制提供“假但一致”的通信实现：
- 创建
mock/event-bus.ts：用Map+Array实现简易事件监听/触发，不依赖 window 或全局 event - 创建
mock/global-state.ts：用 reactive 对象（Vue）或Proxy（React）模拟响应式状态，并支持监听变更 - 在入口文件判断环境：
if (import.meta.env.DEV && !window.__MICRO_APP_ENV)，则用 mock 版本替换真实注入的eventBus和globalState
用依赖注入方式接入，避免硬编码
子应用内部所有通信调用必须通过参数传入或从容器获取，不能写死 window.eventBus 或 import { eventBus } from 'main-app'：
- 组件中接收
eventBus为 prop 或通过 Context / provide 注入 - 自定义 Hook（如
useSharedState）接受globalState实例为参数 - API 服务层（如
orderService.ts）构造函数接收eventBus，用于触发“下单成功”事件
这样，开发时注入 mock 实例，上线时注入主应用真实实例，代码零修改。
配合 MSW 拦截跨子应用的“伪 API 调用”
有些团队会把子应用通信包装成类 API 调用（如 fetch('/api/user-from-order')），实则由主应用网关转发。这种设计虽不推荐，但若已存在，可用 MSW（Mock Service Worker） 统一拦截：
- 在主应用 dev 环境注册 MSW handler，匹配
/api/*路径 - 根据路径前缀识别目标子应用（如
/api/order/list→app-order） - 返回对应子应用的 Mock 数据（来自
mock/order-api.js） - 生产环境关闭 MSW，真实请求走主应用代理逻辑
这种方式让子应用完全感知不到通信是“本地调用”还是“跨域请求”，进一步强化隔离性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
