从零实现 Qiankun 微前端：基座应用控制子应用路由与信息交互
随着前端业务的快速发展，单体应用模式（Monolith）越来越难以支撑复杂业务场景。微前端（Micro Frontends）应运而生，它将大型应用拆解成多个子应用（Micro App），通过主应用进行统一调度和集成。
在微前端技术栈中，Qiankun（乾坤）是一个广泛使用的解决方案，基于 single-spa 封装，提供了开箱即用的微应用加载、沙箱隔离和通信机制。接下来，我们将通过一个完整的实践案例，从零构建并配置 Qiankun 微前端架构。
一、qiankun 原理概述
qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助开发者更简单、无痛地构建生产可用的微前端架构系统。qiankun 通过以下核心机制实现微前端架构：
1. 应用注册与加载
qiankun 通过 registerMicroApps 方法注册子应用，并使用 loadMicroApp 方法加载子应用的资源。qiankun 支持两种加载方式：HTML Entry 和 JS Entry。HTML Entry 是 qiankun 的默认加载方式，它通过加载子应用的 HTML 文件，解析其中的 <script> 和 <link> 标签，动态加载子应用的 JavaScript 和 CSS 资源。
2. 沙箱隔离机制
为了防止子应用之间的相互干扰，qiankun 提供了两种沙箱隔离机制：Proxy 沙箱和快照沙箱。Proxy 沙箱通过 JavaScript 的 Proxy 对象，代理全局对象 window，拦截对全局对象的访问和修改，实现对子应用的隔离。快照沙箱则在子应用挂载和卸载时，分别记录和恢复 window 对象的快照，确保子应用的独立性。
3. 样式隔离机制
qiankun 提供了两种样式隔离方式：CSS 前缀和 Shadow DOM。CSS 前缀通过为子应用的 CSS 类名添加唯一前缀，避免样式冲突。Shadow DOM 则通过浏览器的 Shadow DOM 技术，将子应用的样式和 DOM 结构封装在一个独立的影子树中，实现样式的完全隔离。
4. 生命周期管理
qiankun 为每个子应用提供了生命周期钩子函数，包括 bootstrap、mount、unmount 等，开发者可以在这些钩子函数中编写子应用的初始化、挂载和卸载逻辑，实现对子应用的精细化管理。
5. 应用间通信
qiankun 提供了多种应用间通信方式，包括全局事件总线、props 传递和自定义事件等，开发者可以根据需要选择合适的通信方式，实现主应用与子应用之间的数据传递和事件处理。
📌 推荐阅读：
-
Qiankun 官方文档
二、基座应用（主应用）配置
1. 安装 qiankun
在主应用中安装 qiankun：
npm install qiankun --save
或者
yarn add qiankun2. 配置路由
在 router/index.ts 中配置路由：
//router/index.ts{path: "/home",component: Home,meta: { requiresAuth: true },children: [{ path: "", redirect: "/home/app-store" },{path: "app-store",name: "AppStoreHome",component: AppStore,meta: { requiresAuth: true },},{path: "app-store/:appPath(.*)*",name: "AppStoreSubApp",component: SubAppView,meta: { requiresAuth: true },},// ✅ 其他微前端子应用（不在 app-store 内部）{path: ":appPath(.*)*",name: "SubAppView",component: SubAppView,