Qiankun 微前端实战踩坑历程

前言

这篇文章档记录了我们团队在公司级中后台程序微前端改造过程中的完整踩坑历程。

项目背景公司原有的单体中后台程序因为业务 代码量已超过 万行。建立时间长达 分钟，多团队协作冲突频繁。经过技术选型，我们决定采用 qiankun 进行微前端拆分。将程序拆分为主应用 + 多个业务子应用的架构。

技术栈

• 至于主应用，Vue + TypeScript + Pinia + Vite
• 说到子应用。Vue + Webpack
• 微前端框架的观点是，qiankun .x

为什么子应用使用 Webpack我们的子应用大多是从原有单程序统拆分出来的历史项目，本身就是基于 Webpack 建立的。qiankun 对 Webpack 的支持非常成熟。子应用只需配置 UMD 输出格式即可接入，改造成本低。而 Vite 子应用需要额外的插件和配置来解决 ESM 与 qiankun 沙箱的兼容问题。考虑到稳定性和改造成本，我们选择保持子应用原有的 Webpack 建立方式。

这篇文章记录了从技术调研到生产上线过程中遇到的各种坑、尝试的方法、还有最终形成的常用方法。希望能帮助后来者少走弯路。

背景的观点是。初始尝试：registerMicroApps + start:

import { registerMicroApps,start } from "qiankun";registerMicroApps(",container: "#sub-app-container"。activeRule: "/sub-app",},]);start，

现象： Target container with #sub-app-container not existed .

原因： registerMicroApps + start 模式要求子应用容器始终存在于 DOM 中，但我们的布局是：

• 每个子应用页面有独立的控制面板；
• 容器随路由组件动态创建/销毁；
• layout complexity.
• layout complexity.
• layout complexity.