JeecgBoot低代码平台 Qiankun 微前端集成指南：主应用配置全流程

JeecgBoot人工智能专题探讨，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 — 全局状态管理

构建主应用跟子应用之间的数据共享路径，用以传输用户信息，用于传递权限数据，用来传递主题配置等 global 状态。

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. 导出生命周期函数

子应用必须导出以下四个生命周期函数供主应用调用：

3. 构建输出配置

用于子应用的 vue.config.js，要对其配置成为 UMD 格式来进行输出，并且要开启 CORS 跨域头。

module.exports = {
  output: {
    library: 'qiankun-app',
    libraryTarget: 'umd',
  },
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' },
  },
};

实践中的注意事项总结

针对 JeecgBoot 低代码平台而言，其针对 Qiankun 微前端的集成已然开展了诸多预置工作，对于开发者来讲，仅需将注释取消掉，并且对环境变量进行配置随即就能够迅速启用。微前端架构十分契合多团队协作的大型项目，它在维持整体统一性的状况下能够给予各个业务团队充足的技术自主权。

相关标签： # JeecgBoot # Qiankun # 微前端 # 架构 # 配置