2025微前端架构研究与实践方案
一、为前端概念
微前端是什么：微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。有一个基座应用（主应用），来管理各个子应用的加载和卸载。
所以微前端不是指具体的库，不是指具体的框架，不是指具体的工具，而是一种理想与架构模式。
微前端的核心三大原则就是：独立运行、独立部署、独立开发
二、微前端的优势
采用微前端架构的好处就是，将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性。
最近十多年，前端技术的发展是非常快的，每隔几年就有新的框架出现，导致大家必须升级项目甚至于换一个框架。但如果大家想在一个规模化应用中一个版本做好这件事，基本上是不可能的。
三、以qiankun为例实现微前端的方式
1、Qiankun优势
- 基于 single-spa 封装，提供了更加开箱即用的 API。
- 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
- HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
- 样式隔离，确保微应用之间样式互相不干扰。
- JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
- 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
2、Qiankun的技术核心
2.1 模块划分原则
按业务功能划分：以业务模块为单位划分微前端，如用户管理、订单管理等。每个模块独立开发、部署，降低耦合度。
技术栈独立：Qiankun 支持不同技术栈，如 Vue、React 等。各模块可独立选择技术栈，无需统一。
示例：企业级管理平台中，人力资源管理模块用 Vue，财务管理模块用 React，独立开发。
2.2 独立开发与部署
独立开发环境：各微前端模块独立配置开发环境，如 Vue 项目用 Vue CLI，React 项目用 Create React App。
独立部署流程：通过 Qiankun 配置，各模块独立打包部署。主应用动态加载子应用，不影响其他模块。
代码示例：Vue 子应用 vue.config.js 配置 publicPath 为子应用路径，React 子应用 package.json 配置 homepage。
2.3 模块间通信机制
全局状态管理：使用 Qiankun 提供的全局状态管理，通过 setGlobalState 和 onGlobalStateChange 实现模块间通信。
全局状态共享：通过 Qiankun 提供的全局状态管理，实现模块间状态共享。主应用可设置全局状态，子应用可读取和修改。
主应用设置全局状态 setGlobalState({ user: 'admin' })
子应用监听状态变化 onGlobalStateChange((state) => console.log(state.user))
子应用修改全局状态 setGlobalState({ count: 10 })
2.4 状态隔离与安全
状态隔离：Qiankun 通过沙箱机制，确保各模块状态独立，避免相互干扰。
安全措施：通过权限控制和数据校验，防止模块间恶意篡改状态，保障状态安全。
示例：子应用只能访问和修改自己授权的状态字段，其他字段不可见。
基于 UmiJS + qiankun 实现微前端架构的完整配置方案
分为 主应用（基座） 和 子应用 两部分，详细介绍每部分的代码配置及用途。
✅ 一、主应用（基座）配置
1. 安装插件
yarn add @umijs/plugin-qiankun -D
2. 配置 .umirc.ts 或 config/config.ts
import { defineConfig } from 'umi';export default defineConfig({qiankun: {master: {apps: [{name: 'app1', // 子应用名称entry: '//localhost:8001', // 子应用入口base: '/app1', // 激活路径history: 'browser', // 路由模式},{name: 'app2',entry: '//localhost:8002',base: '/app2',history: 'browser',},{name: 'cabinSense', // 独立部署的子应用接入 qiankun// 独立部署的入口entry: 'https://cabinsense.com',// 激活路径（根据你的菜单或路由自定义）base: '/cabinSense',// 子应用是 hash 路由，所以主应用最好也用 browserhistory: 'browser',// 可选：把 query 参数透传props: {dc_project: 'cdc-ai',dc_region: 'RaD-prod',},},],routes: [{ path: '/app1', microApp: 'app1' },{ path: '/app2', microApp: 'app2' },{path: '/cabinSense/*', // * 通配符匹配子应用所有子路由microApp: 'cabinSense',},],jsSandbox: true, // 启用沙箱隔离prefetch: true, // 启用预加载},},
});
用途说明：
apps：注册子应用列表。routes：配置子应用激活路由。jsSandbox：防止子应用污染全局变量。prefetch：提升子应用加载性能。
✅ 二、子应用配置
1. 安装插件
yarn add @umijs/plugin-qiankun -D
2. 配置 .umirc.ts
import { defineConfig } from 'umi';export default defineConfig({base: '/app1', // 与主应用中 base 保持一致qiankun: {slave: {}, // 表明是子应用},
});
用途说明：
base：子应用路由前缀，必须和主应用中配置一致。slave：开启子应用模式，自动处理生命周期、打包格式等。
✅ 三、子应用生命周期（可选）
在 src/app.ts 或 src/app.js 中导出生命周期钩子（Umi 4 非必须）：
export const qiankun = {async bootstrap(props) {console.log('子应用 bootstrap', props);},async mount(props) {console.log('子应用 mount', props);},async unmount(props) {console.log('子应用 unmount', props);},
};
用途说明：用于在子应用加载、挂载、卸载时执行自定义逻辑（如初始化、清理资源）。
✅ 四、跨域处理（开发环境）
在子应用的 .umirc.ts 中添加 devServer 配置：
export default defineConfig({devServer: {port: 8001,headers: {'Access-Control-Allow-Origin': '*',},},
});
用途说明：解决主应用加载子应用资源时的跨域问题。
✅ 五、目录结构建议
master-app/ # 主应用
├── .umirc.ts
├── src/
│ ├── layouts/
│ └── pages/app1/ # 子应用1
├── .umirc.ts
├── src/
│ └── pages/app2/ # 子应用2
├── .umirc.ts
├── src/
│ └── pages/
✅ 六、运行顺序
- 启动主应用：
cd master-app && yarn dev
- 启动子应用：
cd app1 && yarn dev
cd app2 && yarn dev
- 访问主应用路由如
/app1即可加载对应子应用。
✅ 七、注意事项
| 项目 | 说明 |
|---|---|
| 路由模式 | 主应用和子应用必须使用相同的路由模式（如 browser） |
| base 路径 | 子应用的 base 必须与主应用 base 一致 |
| 插件版本 | 使用 @umijs/plugin-qiankun 而非旧版 @umijs/plugin-qiankun@umi2 |
| Umi 版本 | 推荐使用 Umi 3 或 Umi 4（Umi Max 已集成 qiankun） |
如需进一步扩展功能（如全局状态通信、动态加载子应用），可结合 qiankun 提供的 initGlobalState 和 loadMicroApp API 实现。
如需完整示例项目，可参考开源模板：qiankun-umi-example