JeecgBoot AI专题研究 | JeecgBoot低代码项目嵌入微前端主应用的配置详解
应用场景
在某些企业架构中，JeecgBoot低代码平台并非作为独立系统运行，而是需要嵌入到已有的微前端体系中，作为一个子应用被其他主应用调度和管理。典型场景包括：集团统一门户集成、多系统聚合平台、渐进式系统迁移等。
本文将详细介绍如何将 JeecgBoot-Vue3 前端项目配置为 Qiankun 微前端框架的子应用。
第一步：主应用注册子应用
在你的 Qiankun 主应用中，需要注册 JeecgBoot低代码子应用的基本信息：
{
name: 'jeecg-sub-app',
entry: '//localhost:3100/jeecg-sub-app',
container: '#subapp-container',
activeRule: '/jeecg-sub-app',
props: {
hideSidebar: true, // 隐藏侧边栏（由主应用接管导航）
hideHeader: true, // 隐藏顶部栏
hideMultiTab: true, // 隐藏多标签页
}
}
通过 props 参数可以控制 JeecgBoot低代码子应用的界面元素显隐，避免与主应用的导航、头部等产生视觉冲突。
第二步：修改 JeecgBoot 项目配置
核心配置集中在 .env.production 文件中，需要调整四项关键设置：
1. 启用子应用模式并设置应用名称
VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-sub-app
2. 配置子应用入口地址
VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//your-domain.com/jeecg-sub-app
3. 设置公共路径
VITE_PUBLIC_PATH=/jeecg-sub-app
公共路径必须与主应用中配置的 activeRule 保持一致，否则路由匹配会失败。
4. 配置跨域代理
确保代理配置中包含正确的路径前缀，使得子应用在开发环境下能正常访问后端接口。
完整的环境变量参考配置
# 模拟数据开关
VITE_USE_MOCK = false
# 后端接口地址
VITE_GLOB_DOMAIN_URL=http://your-api-server:8080/jeecg-boot
# 子应用名称（启用即代表以子应用模式运行）
VITE_GLOB_QIANKUN_MICRO_APP_NAME=jeecg-sub-app
# 子应用入口
VITE_GLOB_QIANKUN_MICRO_APP_ENTRY=//your-domain.com/jeecg-sub-app
# 公共路径（需与 activeRule 一致）
VITE_PUBLIC_PATH=/jeecg-sub-app
第三步：启动验证
配置完成后，按以下顺序启动：
- 先启动 JeecgBoot低代码子应用 — 确保它在配置的端口上正常运行
- 再启动主应用 — 主应用会自动检测并加载子应用
访问主应用中对应的路由路径（如 /jeecg-sub-app），如果 JeecgBoot低代码的界面正常渲染在主应用的容器中，说明集成成功。
界面适配建议
当 JeecgBoot低代码作为子应用运行时，通常需要隐藏自身的导航结构（侧边栏、顶部栏、多标签页），由主应用统一提供。通过主应用传递的 props 参数可以灵活控制这些元素的显隐，无需修改子应用代码。
部署注意事项
- 子应用的静态资源路径必须正确，否则 JS/CSS 文件会 404
- 生产环境下子应用需要配置 CORS 响应头，允许主应用域名跨域加载
- 如果使用 Nginx 部署，注意
try_files配置要同时支持主应用路由和子应用资源路径 - 支持版本为 2024-10-22+ 及以上
总结
将 JeecgBoot低代码平台作为 Qiankun 子应用接入的配置并不复杂，核心就是环境变量的四项修改。JeecgBoot 已经在框架层面做好了微前端适配的准备工作，开发者只需关注配置层面的调整，而非底层架构改造。
