微前端通信依赖主子应用js运行时协作，需导出标准生命周期函数、配置umd构建、动态处理资源路径、使用initglobalstate或customevent通信，避免全局污染，并确保样式隔离、路由base一致及unmount彻底清理。
微前端通信不是靠 HTML 文件本身完成的，而是由主应用（shell）和子应用在 JS 运行时协作实现的。不暴露生命周期、不处理跨应用消息通道，qiankun 或 single-spa 会直接报错或静默失败。
子应用必须导出标准生命周期函数才能被正确挂载
主框架（如 qiankun）依赖 bootstrap、mount、unmount 三个函数控制子应用启停。Vue/React 项目默认构建不提供这些，必须手动包裹入口逻辑：
- Vue 项目不能只写
createApp().mount('#app')，要改成导出函数，接收container参数并调用app.mount(container || '#app') - React 项目不能用
ReactDOM.render()一次性挂载，得导出mount函数，内部调用createRoot(container).render() - Webpack 构建需设置
output.library和output.libraryTarget: 'umd'，否则主应用无法通过import()加载子应用模块 - 子应用静态资源路径（
js、css）必须用相对路径，或通过__webpack_public_path__动态注入，否则加载 404
主子应用间通信不能靠全局变量或 localStorage 直接读写
全局变量易冲突，localStorage 触发 storage 事件但无法区分来源，且不支持结构化数据传递。推荐使用框架内置通信机制：
-
qiankun提供initGlobalState(state)创建共享状态，子应用通过onGlobalStateChange订阅、setGlobalState修改 - 若不用框架，可用
CustomEvent+window.dispatchEvent实现轻量广播，但需约定命名空间（如mf:route-change）避免污染 - 跨域子应用（如 iframe 场景）只能走
postMessage，必须校验event.origin并指定targetOrigin，否则有 XSS 风险 - 不要在
mount中直接修改window属性传参，卸载后残留会导致下一次挂载异常
样式隔离与 DOM 污染会让通信“失效”
看似通信成功，但 UI 不响应或事件绑定丢失，大概率是样式或 DOM 节点脱离了子应用容器：
-
qiankun的样式沙箱对内联<style></style>、CSS-in-JS（如styled-components）、动态appendChild的<link>无效 - Ant Design 等组件库的
Modal、Tooltip默认挂载到document.body，需显式传入getContainer={() => container} - 子应用路由未配置
base（如createBrowserRouter({ basename: '/app1' })），会导致useNavigate写入错误 URL，主应用收不到路由变更通知 - 子应用内使用
history.pushState手动跳转，必须确保路径前缀与主应用协商一致，否则触发无限重定向
通信链路真正可靠的前提，是子应用完全“可卸载”：所有定时器、事件监听、全局副作用都必须在 unmount 中清理干净；否则第二次加载时，旧监听器仍会响应新消息，造成状态错乱或内存泄漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
