html怎么创建微前端容器页面_html micro frontends微前端容器【一文搞懂】-html教程-PHP中文网

微前端容器逻辑在js运行时而非index.html；主应用只需提供id="root"挂载点和微前端框架脚本，子应用须导出mount/unmount、使用相对路径、适配base路由、隔离样式并交出dom控制权。

html怎么创建微前端容器页面_html micro frontends微前端容器【一文搞懂】

index.html 本身不是微前端容器，它只是被加载的静态资源；真正的容器逻辑在 JS 运行时，由主应用（shell）通过 fetch、import() 或动态 script 标签控制子应用生命周期——没写对 mount 和 unmount，页面一切换就白屏或报 TypeError: app.mount is not a function。

主应用的 `index.html` 只需提供一个空挂载点

它不负责“实现”微前端，只负责承载运行时框架和子应用入口。关键就两件事：id="root" 容器 + 加载微前端框架脚本。

必须有一个明确的根节点，比如 <div id="root"></div>，所有子应用都挂载到它内部，不能用直接当容器（会污染全局）
不要在 index.html 里硬编码子应用的 script 标签——那是运行时动态决定的，否则无法做沙箱隔离和按需加载
如果用 qiankun，主应用的 index.html 里只需引入自己的入口 JS（如 main.js），并在其中调用 registerMicroApps()，其他全交给 JS 控制
避免在 head 中预加载子应用的 CSS/JS：它们应由微前端框架统一管理加载顺序和执行时机，否则可能触发跨域或执行时序错误

子应用的 `index.html` 必须适配运行时上下文

它不是独立可访问的页面，而是被主应用 fetch 后解析 DOM 并提取 JS 的资源包。路径、资源引用、挂载行为全要让渡控制权。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

public/index.html 中所有静态资源（js、css）必须用相对路径，或通过 __webpack_public_path__ 动态注入，否则主应用加载时 404
不能写 <script src="./app.js"></script> 这种绝对路径引用，Webpack 构建时要设 output.publicPath: './' 或由主应用运行时重写
内不能有初始化逻辑（比如直接 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></style>
用了 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

微前端容器页面最难的从来不是 HTML 结构，而是让每个子应用“忘记自己曾是个完整页面”——卸下自举逻辑、交出样式控制权、接受外部路由调度。一旦某处还留着 document.getElementById('app').innerHTML = ... 或硬编码 http://localhost:8080/static/，整个链路就会在某个看似无关的切换时刻突然断裂。