子应用必须导出具名函数bootstrap、mount、unmount（及可选update），而非对象字面量；qiankun通过esm动态导入直接调用这些函数，按顺序串行执行并等待promise完成，确保沙箱隔离与正确卸载。
子应用必须导出标准生命周期函数
子应用入口文件（如 entry.js 或 index.js）需显式导出三个函数，不能包裹在任意对象里：
- bootstrap：仅执行一次，用于初始化（如创建全局状态、预加载资源），必须返回 Promise 或 void
- mount：每次子应用挂载时调用，接收 props（含容器节点、路由基础等），必须返回 Promise 或 void
- unmount：每次卸载时调用，用于清理（如销毁实例、解绑事件），必须返回 Promise 或 void
✅ 正确写法（函数导出，非对象字面量）：
export async function bootstrap() {
console.log('子应用启动');
}
export async function mount(props) {
const { container } = props;
renderApp(container); // 挂载真实 UI
}
export async function unmount(props) {
const { container } = props;
unmountApp(container); // 卸载清理
}
为什么不能用对象字面量封装？
qiankun 的沙箱和加载器会通过 ESM 动态导入 获取子应用模块，然后直接调用 bootstrap()、mount() 等导出函数。它不解析或遍历某个对象属性来查找钩子。
❌ 错误示例（qiankun 无法识别）：
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
export default {
bootstrap: () => { ... },
mount: (props) => { ... },
unmount: (props) => { ... }
};
这样导出会直接导致主应用报错：subApp.bootstrap is not a function。
确保流式执行的关键细节
qiankun 内部按固定顺序、等待前一个 Promise resolve 后再触发下一个，所以你要保证：
- 每个函数返回 Promise（推荐用 async/await），避免同步阻塞或未处理异步逻辑
-
mount中完成真实 DOM 渲染，且容器节点来自 props.container，而非document.body—— 这是沙箱隔离的前提 -
unmount必须彻底清理副作用（定时器、事件监听、全局变量、Vue/React 实例），否则影响下次 mount
主应用注册时无需额外配置钩子
主应用只需调用 registerMicroApps([...]) 并传入子应用 URL 和配置，qiankun 会自动发现并调用其导出的生命周期函数。你不需要、也不应该在主应用里用对象字面量“声明”或重写这些钩子。
例如：
registerMicroApps([
{
name: 'app-vue',
entry: '//localhost:8081',
container: '#subapp-1',
activeRule: '/vue'
}
]);
不复杂但容易忽略：生命周期函数必须导出为具名函数，且名称严格匹配，大小写敏感，无包装对象。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
