single-spa微前端框架实战教程

single-spa-html 是 single-spa 生态中专为挂载纯静态 HTML 内容设计的轻量级适配器，它不执行 JS、不隔离 CSS、也不管理完整生命周期，仅负责将 HTML 字符串注入指定容器，因此特别适合无交互的内容页或营销页；但它绝不能直接当作子应用使用——必须包装成符合 single-spa 规范的 bootstrap/mount/unmount 导出形式，否则会因生命周期缺失导致白屏或加载失败；同时需手动处理路径代理、样式前缀、脚本污染和资源加载时机等关键细节，稍有疏忽就会在开发环境静默 404 或生产环境全局冲突，这篇文章直击实践中最易踩坑的底层原理与实操方案，帮你避开“看似简单、实则致命”的微前端集成陷阱。

single-spa-html 是什么，能不能直接当子应用用？

single-spa-html 不是一个独立的“子应用模板”，而是 single-spa 生态中一个轻量级的、用于挂载纯静态 HTML 片段的微前端适配器。它不处理 JS 执行、CSS 隔离或生命周期管理，只负责把一段 HTML 字符串插入指定容器——所以它适合做「内容页」「营销页」这类无交互或仅含内联脚本的场景，但不适合 React/Vue 等框架应用。

常见误用现象：single-spa-html 加载后页面空白，或控制台报 Application 'xxx' died in status LOADING_SOURCE_CODE: Cannot find module——这通常是因为你把它当成了框架子应用的替代品，而没配真正的 application 生命周期函数。

• 它只导出一个 htmlApplication 工厂函数，接收 { template, mountParcel } 等参数
• 必须手动确保 HTML 中的相对路径（如 ）在主应用上下文中可访问，否则 404
• 不支持 import-map 自动解析，JS 脚本需内联或通过