• 时间:
  • 分类:

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

第三步：启动验证

配置完成后，按以下顺序启动：

  1. 先启动 JeecgBoot低代码子应用 — 确保它在配置的端口上正常运行
  2. 再启动主应用 — 主应用会自动检测并加载子应用

访问主应用中对应的路由路径（如 /jeecg-sub-app），如果 JeecgBoot低代码的界面正常渲染在主应用的容器中，说明集成成功。

界面适配建议

当 JeecgBoot低代码作为子应用运行时，通常需要隐藏自身的导航结构（侧边栏、顶部栏、多标签页），由主应用统一提供。通过主应用传递的 props 参数可以灵活控制这些元素的显隐，无需修改子应用代码。

部署注意事项

  • 子应用的静态资源路径必须正确，否则 JS/CSS 文件会 404
  • 生产环境下子应用需要配置 CORS 响应头，允许主应用域名跨域加载
  • 如果使用 Nginx 部署，注意 try_files 配置要同时支持主应用路由和子应用资源路径
  • 支持版本为 2024-10-22+ 及以上

总结

将 JeecgBoot低代码平台作为 Qiankun 子应用接入的配置并不复杂，核心就是环境变量的四项修改。JeecgBoot 已经在框架层面做好了微前端适配的准备工作，开发者只需关注配置层面的调整，而非底层架构改造。

标签: none

添加新评论