在微前端中利用HTML Entry实现子应用自治的实践-html教程-PHP中文网

html entry要求子应用保持自治但需主应用正确处理路径重写、沙箱注入、路由透传等；否则将导致404、全局污染或样式残留。

在微前端中利用html entry实现子应用自治的实践

HTML Entry 能让子应用保持完整构建产物和独立运行能力，但“自治”不等于“免配置”——它依赖主应用正确解析、重写路径、注入沙箱，否则子应用一加载就 404 或全局污染。

为什么子应用 index.html 的 script/src 必须是绝对 URL

fetch 拉取的 HTML 在主应用上下文中执行，document.baseURI 是主应用地址（如 https://main.com/），不是子应用构建时的 publicPath。相对路径如 ./main.js 会被解析成 https://main.com/main.js，必然 404。

构建时配置 publicPath 为完整 URL（如 https://sub.com/），确保产出 HTML 中所有 script 和 link 的 src/href 是绝对路径
若无法改构建配置，主应用需在 DOMParser 解析后，对每个 script 节点的 src 执行 new URL(scriptSrc, response.url) 重写
内联 <script>console.log(1)</script> 不受路径影响，但必须交由沙箱执行（如 qiankun 的 execScripts），不能直接 eval 或插入 innerHTML

DOMParser 解析后不能直接 innerHTML 挂载

直接 container.innerHTML = htmlStr 会跳过路径重写、脚本拦截和样式隔离，导致资源加载失败、JS 全局污染、CSS 泄漏。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

必须用 new DOMParser().parseFromString(htmlStr, 'text/html') 得到 Document 对象
遍历 document.scripts 和 document.stylesheets，分别处理外链与内联资源
link[rel="stylesheet"] 和 style 需提取内容并注入 <style></style> 标签，同时重写 CSS 中的 url(./icon.png) 为绝对路径
最终只把 document.body 的子节点挂载到容器中，避免 head 冲突或重复注入

子应用路由 base path 必须由主应用显式传入

子应用自己无法感知当前被挂载在 /app1 还是 /app2 下，硬编码 base: '/' 会导致 history.push('/user') 实际跳转到 https://main.com/user，而非 https://main.com/app1/user。

主应用挂载前设置全局变量：window.__MICRO_APP_BASE_ROUTE__ = '/app1'
子应用初始化路由时读取该变量：Vue Router 用 base: window.__MICRO_APP_BASE_ROUTE__ || '/'；React Router v6+ 用 <router basename="{window.__MICRO_APP_BASE_ROUTE__}"></router>
服务端必须配置 fallback：Nginx 的 location /app1 { try_files $uri $uri/ /app1/index.html; }，否则刷新页面直接 404