微前端容器逻辑在JS运行时而非index.html；主应用只需提供id="root"挂载点和微前端框架脚本，子应用须导出mount/unmount、使用相对路径、适配base路由、隔离样式并交出DOM控制权。
index.html 本身不是微前端容器，它只是被加载的静态资源；真正的容器逻辑在 JS 运行时，由主应用（shell）通过 fetch、import() 或动态 script 标签控制子应用生命周期——没写对 mount 和 unmount，页面一切换就白屏或报 TypeError: app.mount is not a function。
主应用的 index.html 只需提供一个空挂载点
它不负责“实现”微前端，只负责承载运行时框架和子应用入口。关键就两件事：id="root" 容器 + 加载微前端框架脚本。
- 必须有一个明确的根节点，比如
<div id="root"></div>，所有子应用都挂载到它内部，不能用<body>直接当容器（会污染全局） - 不要在
index.html里硬编码子应用的script标签——那是运行时动态决定的，否则无法做沙箱隔离和按需加载 - 如果用 qiankun，主应用的
index.html里只需引入自己的入口 JS（如main.js），并在其中调用registerMicroApps()，其他全交给 JS 控制 - 避免在
head中预加载子应用的 CSS/JS：它们应由微前端框架统一管理加载顺序和执行时机，否则可能触发跨域或执行时序错误
子应用的 index.html 必须适配运行时上下文
它不是独立可访问的页面，而是被主应用 fetch 后解析 DOM 并提取 JS 的资源包。路径、资源引用、挂载行为全要让渡控制权。
-
public/index.html中所有静态资源（js、css）必须用相对路径，或通过__webpack_public_path__动态注入，否则主应用加载时 404 - 不能写
<script src="./app.js"></script>这种绝对路径引用，Webpack 构建时要设output.publicPath: './'或由主应用运行时重写 -
<body>内不能有初始化逻辑（比如直接new Vue()），所有挂载必须包裹进导出的mount函数里，并接收容器节点参数 - Vue 项目示例：别再写
createApp(App).mount('#app')，要改成export async function mount(props) { const container = props.container || document.body; createApp(App).mount(container.querySelector('#app')); }
样式隔离失效的常见现场和绕过方式
qiankun 的样式沙箱（snapshot 模式）只劫持 document.head 的 appendChild/removeChild，对很多真实场景无感。
- 子应用内联了
<style>body { margin: 0 }</style>？它直接写进head，逃逸沙箱 → 改用 CSS Modules 或<style scoped> - 用了
styled-components？它的 runtime style 标签是 JS 插入的，但不在沙箱监听路径里 → 配合StyleSheetManager指定target到子应用容器节点 - Ant Design 的
Modal默认挂到document.body？事件和样式全错乱 → 所有弹窗类组件显式传getContainer={() => container.querySelector('.sub-app-root')} - 动态插入的
<link rel="stylesheet">？沙箱不感知 → 改用 JS 动态fetch+insertRule注入，或提前打包进 JS bundle
路由 base path 不匹配导致无限重定向
主应用路由是 /app1/user，子应用却按 /user 解析，history API 就会写错地址，触发主应用再次匹配、再次加载子应用……死循环。
立即学习“前端免费学习笔记（深入）”；
- 子应用启动前必须识别当前 URL 前缀，Vue Router 要设
base: '/app1/'，React Router 要传basename="/app1/" - 不能靠
window.location.pathname硬切，得用主应用通过props传入的baseRoute或从location中提取已知前缀 - 子应用内部跳转（如
router.push('/detail')）必须是相对路径，否则会跳到根域 → 统一用router.push({ path: '/detail' })，依赖 router 的 base 自动补全 - 主应用做路由劫持时，若子应用还没 mount 就触发
pushState，可能丢失状态 → 在mount回调里才启用子应用的 history listener
document.getElementById('app').innerHTML = ... 或硬编码 http://localhost:8080/static/，整个链路就会在某个看似无关的切换时刻突然断裂。 
