qiankun子应用必须导出bootstrap/mount/unmount生命周期函数、打包为UMD格式、资源路径使用__webpack_public_path__或相对路径,三者缺一不可;否则将报错或白屏。

qiankun 微前端不是把 HTML 文件扔进去就能跑的,子应用必须满足三个硬性条件:导出生命周期函数、UMD 打包、资源路径可控。缺一不可,否则直接报错或白屏。
子应用没 export bootstrap/mount/unmount 就报错
这是最常卡住人的第一步。Vue/React CLI 默认构建出来的入口文件(如 main.js)只调用 createApp().mount() 或 ReactDOM.render(),根本没导出函数。
- Vue 项目需在外层包裹导出逻辑,不能只执行挂载 —— 把
createApp(App).mount('#app')拆开,改写为接受容器节点的函数,并export三个生命周期 - React 项目不能用
ReactDOM.render()一次性挂载,得改成接收container参数的函数,且render和unmount都要手动清理 - 检查打包后生成的 JS 文件是否真包含
export语句(不是module.exports),否则主应用通过import()加载时会失败
子应用加载后样式丢失或污染主应用
qiankun 的样式沙箱对三类情况完全失效:内联 <style></style> 含全局选择器(如 body { margin: 0 })、CSS-in-JS 运行时注入(styled-components)、动态 appendChild 新的 <style></style> 或 <link>。
- 禁止在子应用中直接修改
document.body或写无作用域的全局样式 - UI 库弹窗(如
Modal)默认挂到document.body,必须显式传入getContainer={() => container}指向子应用根节点 - 推荐搭配
CSS Modules或<style scoped></style>,避免靠沙箱“兜底”
子应用静态资源 404 或跨域失败
子应用 HTML 被 fetch 下来后,里面写的 <script src="/js/app.js"></script> 会按主应用域名 + 绝对路径请求,而非子应用自己的部署地址。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记(深入)”;
- Webpack 构建必须设
output.publicPath: '__webpack_public_path__',并在入口 JS 开头加__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; - 所有资源路径(
js、css、图片)要么用相对路径(./js/app.js),要么由主应用注入的__webpack_public_path__动态拼接 - 如果子应用是独立部署的,主应用注册时需传
entry为完整 URL(如https://sub.example.com/index.html),且该域名需允许跨域(CORS)或走代理
JS 沙箱失效或子应用间状态残留
ProxySandbox 是默认开启的,但只拦截对 window 的读写。它不处理 localStorage、sessionStorage、indexedDB、定时器、全局事件监听器(addEventListener('click', ...))等。
- 子应用卸载时,必须手动清除自己注册的全局事件、定时器、
localStorage写入 ——unmount钩子里不做这事,下次再进就会复用旧状态 - 避免直接写
window.xxx = ...,改用props传参或initGlobalState做跨应用通信 - 若子应用用了
moment.locale、axios.defaults.baseURL这类全局配置,卸载时也得重置,否则污染其他子应用
最容易被忽略的是:子应用的 public/index.html 里哪怕只有一处 <link href="/css/reset.css">,也会因路径错误导致 404;而这个错误在控制台里可能只显示 “Failed to load resource”,不提示具体是哪个子应用、哪条链路崩了。


















