JeecgBoot AI专题研究 | JeecgBoot低代码微前端架构落地实践
微前端解决了什么问题？
当 JeecgBoot低代码项目发展到一定规模，单体前端的弊端开始显现：模块耦合严重、构建时间激增、团队协作困难。微前端架构允许将不同业务模块拆分为独立的子应用，各自开发、独立部署，通过 Qiankun 框架在运行时动态组合。
本文聚焦于如何将 JeecgBoot-Vue3 配置为 Qiankun 微前端的主应用（基座），接管路由分发和子应用生命周期管理。
第一步：安装 Qiankun 依赖
在 JeecgBoot低代码主应用项目中安装 Qiankun：
pnpm add qiankun
第二步：配置子应用注册信息
JeecgBoot 已经预置了 Qiankun 集成的代码框架，只需要取消注释并配置三个核心文件：
src/qiankun/apps.ts — 子应用注册表
在这个文件中定义每个微应用的元数据：
const apps = [
{
name: 'qiankun-app', // 子应用唯一标识
entry: '//localhost:8001', // 子应用入口地址
container: '#subapp-viewport', // 挂载容器
activeRule: '/qiankun-app', // 路由激活规则
},
];
src/qiankun/state.ts — 全局状态管理
建立主应用与子应用之间的数据共享通道，用于传递用户信息、权限数据、主题配置等全局状态。
src/qiankun/index.ts — 注册与启动
注册所有子应用并配置生命周期钩子（加载前、挂载后、卸载后等），这是微前端运行时的核心调度逻辑。
第三步：配置环境变量
不同环境下子应用的入口地址不同，需要在环境变量文件中分别配置。
开发环境 .env.development：
VITE_APP_SUB_qiankun-app = '//localhost:8001/qiankun-app'
生产环境 .env.production：
VITE_APP_SUB_qiankun-app = '[生产域名]/qiankun-app'
同时，在环境变量中开启 Qiankun 全局开关：
VITE_GLOB_APP_OPEN_QIANKUN=true
第四步：子应用侧的适配要求
子应用要接入 JeecgBoot低代码主应用，需要满足以下条件：
1. 配置运行时公共路径
创建 public-path.js 文件，确保子应用在 Qiankun 沙箱环境下能正确加载静态资源：
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2. 导出生命周期函数
子应用必须导出以下四个生命周期函数供主应用调用：
bootstrap()— 初始化，仅在首次加载时调用mount()— 挂载，每次进入子应用时调用unmount()— 卸载，每次离开子应用时调用update()— 更新，主应用传递数据变更时调用
3. 构建输出配置
子应用的 vue.config.js 需要配置 UMD 格式输出，并开启 CORS 跨域头：
module.exports = {
output: {
library: 'qiankun-app',
libraryTarget: 'umd',
},
devServer: {
headers: {
'Access-Control-Allow-Origin': '*' },
},
};
实践中的注意事项
- 样式隔离：Qiankun 默认的沙箱机制可以隔离 JS 全局变量，但 CSS 隔离需要额外配置
strictStyleIsolation或experimentalStyleIsolation - 路由冲突：主应用和子应用的路由前缀不能重叠，建议每个子应用使用独立的路由命名空间
- 通信机制：简单场景使用 Qiankun 内置的
initGlobalState，复杂场景可以引入 EventBus 或状态管理库
总结
JeecgBoot低代码平台对 Qiankun 微前端的集成已经做了大量预置工作，开发者只需取消注释、配置环境变量即可快速启用。微前端架构特别适合多团队协作的大型项目，能够在保持整体统一性的同时给予各业务团队充分的技术自主权。
