1 介绍
1.1 定义
01.什么是Qiankun
a.微前端框架
Qiankun是基于single-spa封装的微前端框架，由蚂蚁金服开源并大规模应用于生产环境
b.核心定位
旨在帮助大型应用实现技术栈无关的微前端架构，支持主应用和子应用的独立开发、部署和运行
c.技术背景
为解决单体应用维护困难、技术栈锁定、团队协作效率低下等问题而设计的企业级解决方案
02.微前端架构
a.架构理念
将单体应用拆分为多个独立的小型应用，每个应用负责特定的业务功能
b.运行模式
主应用作为基座，负责加载和管理各个子应用，子应用可以独立开发和部署
c.技术价值
实现了应用的增量升级、技术栈解耦和团队独立开发，提升大型项目的可维护性
1.2 使用1
00.微前端架构概述
a.核心概念
a.主应用（Base App）
负责全局路由、状态管理和子应用调度。
b.子应用（Micro App）
独立开发、部署的业务模块，支持不同技术栈。
c.通信机制
主应用与子应用间通过 props 或全局状态共享数据。
01.环境准备
a.创建主应用
# 使用 Vite 快速创建 Vue3 项目
npm create vue@latest main-app
cd main-app
npm install qiankun -S
b.创建子应用
npm create vue@latest micro-vue-app
02.主应用配置
a.注册子应用
在 src/micro/apps.ts 中定义子应用信息
-----------------------------------------------------------------------------------------------------
// apps.ts
export default [
{
name: 'micro-vue-app',
entry: '//localhost:7101', // 子应用开发环境地址
container: '#subapp-container',
activeRule: '/micro-vue',
},
];
b.启动 Qiankun
修改 main.ts。
-----------------------------------------------------------------------------------------------------
import { createApp } from 'vue';
import { registerMicroApps, start } from 'qiankun';
import App from './App.vue';
import apps from './micro/apps';
const app = createApp(App);
// 注册子应用
registerMicroApps(apps);
// 启动 qiankun
start({
prefetch: 'all', // 预加载子应用
sandbox: { experimentalStyleIsolation: true }, // 样式隔离
});
app.mount('#main-app');
c.路由配置
修改 router/index.ts，确保主应用路由不干扰子应用。
-----------------------------------------------------------------------------------------------------
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ path: '/', component: HomeView },
{ path: '/micro-vue/*', component: () => import('@/views/MicroContainer.vue') },
],
});
03.子应用改造
a.导出生命周期钩子
在子应用入口文件 src/main.ts 中。
-----------------------------------------------------------------------------------------------------
import { createApp } from 'vue';
import App from './App.vue';
let instance: any = null;
function render(props: any) {
const { container } = props;
instance = createApp(App);
instance.mount(container?.querySelector('#app') || '#app');
}
// 独立运行时直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
render({});
}
// 导出 Qiankun 生命周期
export async function bootstrap() {
console.log('Vue子应用启动');
}
export async function mount(props: any) {
render(props);
}
export async function unmount() {
instance.unmount();
instance = null;
}
b.配置打包工具（Vite）
修改 vite.config.ts。
-----------------------------------------------------------------------------------------------------
export default defineConfig({
base: '/micro-vue', // 与主应用 activeRule 匹配
server: {
port: 7101,
cors: true,
},
build: {
rollupOptions: {
output: {
format: 'system', // 使用 SystemJS 格式
},
},
},
});
---
c.添加 publicPath 适配
在子应用根目录创建 public-path.js。
-----------------------------------------------------------------------------------------------------
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
04.主应用与子应用通信
a.主应用传递数据
注册子应用时添加 props。
-----------------------------------------------------------------------------------------------------
registerMicroApps(apps, {
beforeLoad: (app) => {
return {
...app,
props: { globalToken: '主应用传递的Token' },
};
},
});
b.子应用接收数据
在子应用 mount 生命周期中获取。
-----------------------------------------------------------------------------------------------------
export async function mount(props: any) {
console.log('接收主应用数据:', props.globalToken);
render(props);
}
05.常见问题
a.结构示例
├── main-app/ # 主应用
│ ├── src/
│ │ ├── micro/ # 微前端配置
│ │ └── views/MicroContainer.vue
├── micro-vue-app/ # Vue3子应用
│ ├── src/
│ │ └── main.ts # 导出生命周期
b.样式隔离
方案一：开启 sandbox: { experimentalStyleIsolation: true }（添加样式前缀）
方案二：使用 CSS Modules 或 Shadow DOM
c.公共依赖处理
通过 webpack 的 externals 或 Vite 的 build.rollupOptions.external 共享公共库（如 Vue3）。
d.子应用独立路由
子应用需使用 createWebHistory 并配置 base。
-----------------------------------------------------------------------------------------------------
const router = createRouter({
history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/micro-vue' : '/'),
});
1.3 使用2
01.架构设计
a.主应用（基座）
负责全局路由、权限、状态管理，以及子应用的加载
b.子应用
包括Vue2、Vue3和React16子系统，独立仓库管理
c.公共依赖管理
共享工具库和样式规范
02.实施步骤
a.搭建主应用基座
使用Vue3或纯JavaScript
配置微前端环境，注册子应用并启动
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{ name: 'vue2-app', entry: '//localhost:7101', container: '#subapp-container', activeRule: '/vue2' },
{ name: 'vue3-app', entry: '//localhost:7102', container: '#subapp-container', activeRule: '/vue3' },
{ name: 'react16-app', entry: '//localhost:7103', container: '#subapp-container', activeRule: '/react16' }
]);
start({
prefetch: 'all',
sandbox: { experimentalStyleIsolation: true }
});
b.子应用改造（以Vue2为例）
配置子应用的生命周期钩子和Webpack。
// vue2-app/src/public-path.js
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// vue2-app/src/main.js
let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
router,
store,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app');
}
export async function bootstrap() {}
export async function mount(props) { render(props); }
export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ''; instance = null; }
Webpack配置：
module.exports = {
devServer: {
headers: { 'Access-Control-Allow-Origin': '*' }
},
configureWebpack: {
output: {
library: `vue2App`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_vue2App`
}
}
};
c.解决多框架冲突
样式隔离：启用qiankun的样式沙箱，使用CSS Modules
JS沙箱：启用严格样式隔离和Shadow DOM
公共依赖处理：使用externals配置共享依赖
d.路由统一管理
主应用处理一级路由，子应用处理子路由
// main-app/src/router.js
const routes = [
{ path: '/vue2/*', name: 'vue2', meta: { title: 'Vue2子系统' } },
{ path: '/vue3/*', name: 'vue3', meta: { title: 'Vue3子系统' } },
{ path: '/react16/*', name: 'react16', meta: { title: 'React16子系统' } }
];
e.部署优化策略
独立部署：每个子应用单独构建，主应用通过Nginx配置反向代理
资源预加载：按需预加载子应用资源
性能监控：集成监控SDK，监控子应用性能
1.4 核心概念
01.主应用（Base App）
a.定义
作为整个微前端架构的基座应用，负责全局的路由管理、子应用调度和公共资源共享
b.职责范围
提供统一的导航菜单、用户认证、全局状态管理和子应用容器
c.技术要求
可以使用任意前端框架构建，通常选择Vue或React作为主应用技术栈
02.子应用（Micro App）
a.定义
独立的业务应用，可以单独开发、测试和部署，最终被主应用加载运行
b.技术特点
支持Vue、React、Angular等不同技术栈，每个子应用可以选择最适合的技术方案
c.生命周期
具备bootstrap、mount、unmount三个核心生命周期钩子，与主应用进行交互
03.路由系统
a.路由模式
主应用负责一级路由分发，子应用管理内部路由，形成嵌套路由结构
b.路由规则
通过activeRule配置子应用的路由激活规则，支持精确匹配和通配符匹配
c.导航管理
主应用提供全局导航，子应用间的切换通过主应用路由控制实现
04.沙箱机制
a.JS沙箱
为每个子应用提供独立的JavaScript执行环境，避免全局变量污染和冲突
b.样式隔离
通过CSS作用域隔离或Shadow DOM技术，确保子应用样式不会相互影响
c.安全机制
限制子应用对window对象的直接操作，提供安全的API接口供子应用使用
1.5 优缺点
01.主要优势
a.技术栈无关
主应用和子应用可以选择不同的技术栈，团队可以根据业务需求选择最合适的技术方案
b.独立开发部署
各个子应用可以独立开发、测试、部署，不会相互影响，提升开发效率和部署灵活性
c.增量升级
可以逐步将老旧系统迁移到新的技术栈，不需要一次性重构整个应用
d.团队协作
不同团队可以并行开发不同的子应用，减少代码冲突和协作成本
02.存在挑战
a.学习成本
团队需要学习微前端架构理念和Qiankun框架的使用方法，有一定的学习曲线
b.架构复杂度
相比单体应用，微前端架构更加复杂，需要处理主子应用的通信、状态同步等问题
c.性能开销
需要加载多个独立的应用，可能带来额外的性能开销和内存占用
d.调试难度
跨应用的调试和问题定位相对困难，需要专门的调试工具和方法
03.适用性分析
a.适合场景
大型企业级应用、多团队协作的项目、需要技术栈迁移的系统
b.不适合场景
小型项目、初创公司产品、对性能要求极致的简单应用
c.过渡方案
可以作为从单体应用向微服务架构过渡的中间方案
1.6 使用场景
01.企业级应用
a.大型管理系统
企业内部的ERP、CRM、OA等管理系统，通常包含多个业务模块
b.多部门协作
不同业务部门可以独立开发和维护自己的功能模块
c.权限管理
主应用统一管理用户权限，子应用根据权限级别显示对应功能
02.技术栈迁移
a.渐进式重构
将传统的单体应用逐步拆分为微前端架构，逐步替换老旧技术栈
b.多技术栈并存
新功能使用现代技术栈开发，老功能保持原有技术，实现平滑过渡
c.团队能力匹配
根据团队的技术能力选择合适的技术栈，不需要强制统一技术方案
03.平台化产品
a.SaaS平台
为不同客户提供定制化功能，通过子应用实现模块化服务
b.插件化架构
支持第三方插件开发，子应用作为插件形式集成到主平台
c.多租户系统
不同租户使用不同的子应用组合，实现个性化定制服务
04.混合开发场景
a.多框架集成
在同一个系统中同时使用Vue、React、Angular等不同框架
b.新老系统整合
将现有的多个独立系统整合为一个统一的门户应用
c.外部系统集成
将外部开发的系统作为子应用集成到主应用中
1.7 架构原理
01.核心架构
a.主应用架构
基于single-spa实现应用注册、路由分发和生命周期管理
提供统一的加载机制和通信接口
b.子应用架构
每个子应用作为独立的JavaScript模块，具备完整的生命周期
支持多种打包格式（UMD、SystemJS等）
c.通信架构
基于props传递和全局状态管理实现主子应用间的数据通信
支持双向通信和事件机制
02.加载机制
a.应用注册
通过registerMicroApps注册子应用信息，包括名称、入口地址、容器选择器等
b.资源加载
动态加载子应用的JavaScript、CSS等静态资源
支持预加载策略，提升用户体验
c.生命周期管理
自动调用子应用的bootstrap、mount、unmount生命周期钩子
处理子应用的启动、挂载和卸载过程
03.路由管理
a.路由监听
监听浏览器路由变化，根据activeRule匹配对应的子应用
b.应用切换
路由变化时自动卸载当前子应用，激活目标子应用
c.嵌套路由
支持主应用路由与子应用路由的嵌套组合
04.沙箱实现
a.JS沙箱
通过Proxy或快照模式实现JavaScript执行环境隔离
拦截window对象的读写操作，避免全局变量污染
b.样式隔离
使用CSS作用域、Shadow DOM或样式前缀等技术实现样式隔离
确保子应用样式不会影响其他应用
c.资源隔离
为每个子应用提供独立的资源命名空间
避免静态资源冲突和覆盖问题
1.8 技术特性
01.技术栈无关
a.框架支持
完美支持Vue2/3、React15/16/17/18、Angular等主流前端框架
支持原生JavaScript开发的应用接入
b.构建工具兼容
兼容Webpack、Vite、Rollup等主流构建工具
支持不同的模块格式（ESM、CommonJS、UMD等）
c.语言支持
支持TypeScript、JavaScript等开发语言
可以与各种UI组件库配合使用
02.开箱即用
a.简单API
提供简洁易用的API接口，学习成本低
支持配置式和编程式两种使用方式
b.完整文档
提供详细的API文档和使用示例
包含常见问题的解决方案和最佳实践
c.开发工具
提供开发调试工具，方便问题定位和性能优化
支持热更新和开发环境调试
03.生产就绪
a.性能优化
内置预加载、懒加载等性能优化策略
支持资源压缩和缓存机制
b.错误处理
完善的错误边界和异常处理机制
支持应用级别的错误监控和上报
c.兼容性
良好的浏览器兼容性，支持IE11+和现代浏览器
适配移动端和桌面端应用场景
04.扩展能力
a.插件机制
提供丰富的插件接口，支持自定义扩展
社区提供多种实用插件和中间件
b.状态管理
内置全局状态管理方案，支持主子应用状态共享
可以与Redux、Vuex等状态管理库集成
c.监控集成
支持性能监控、用户行为分析等监控工具集成
提供应用级别的指标收集和分析能力
1.9 与其他方案对比
01.对比Single-SPA
a.优势对比
Qiankun在single-spa基础上提供了更完善的沙箱机制和样式隔离
提供了更友好的API和开箱即用的解决方案
b.功能增强
增加了应用间通信、全局状态管理等高级特性
提供了更完善的错误处理和加载优化策略
c.使用体验
降低了使用门槛，减少了样板代码
提供了更好的开发体验和调试工具
02.对比Module Federation
a.架构差异
Module Federation基于Webpack5的模块联邦机制，实现运行时模块共享
Qiankun基于应用级别的加载和隔离，更注重应用的独立性
b.耦合程度
Module Federation支持模块级别的细粒度共享，耦合度相对较高
Qiankun保持应用的完全独立性，耦合度较低
c.适用场景
Module Federation适合微组件级别的共享，Qiankun适合业务应用级别的集成
03.对比iframe方案
a.性能对比
Qiankun性能优于iframe，避免了重复加载公共资源
iframe方案需要完整的页面加载，资源开销较大
b.交互体验
Qiankun提供更流畅的用户体验和页面切换效果
iframe存在页面刷新和加载延迟问题
c.开发复杂度
Qiankun提供统一的开发模式和维护成本
iframe方案需要处理跨域、通信等复杂问题
04.选择建议
a.技术栈统一场景
如果团队技术栈相对统一，可以选择Module Federation
b.完全独立场景
如果需要完全隔离和独立部署，Qiankun是更好的选择
c.简单集成场景
对于简单的应用集成需求，iframe方案也可以考虑
d.长期维护考虑
对于需要长期维护的大型项目，推荐使用Qiankun方案
2 核心组件
2.1 汇总：6个核心组件
00.总结
a.主应用（Base App）
整个微前端架构的基座，负责全局管理和子应用调度
b.子应用（Micro App）
独立的业务应用，具备完整的生命周期和独立运行能力
c.路由系统
管理主应用和子应用的路由分发，实现应用间的无缝切换
d.样式隔离
确保不同应用的样式不会相互干扰，保持视觉一致性
e.JS沙箱
为每个子应用提供独立的JavaScript执行环境
f.通信机制
实现主应用和子应用间的数据传递和状态同步
2.2 主应用（Base App）
01.核心职责
a.应用管理
负责注册、加载、卸载和管理所有的子应用
提供统一的启动和停止机制
b.路由控制
管理全局路由，根据URL路径决定激活哪个子应用
处理子应用间的路由切换和导航逻辑
c.资源调度
管理公共资源的加载和共享，优化整体性能
控制子应用资源的加载时机和策略
d.全局状态
维护全局状态管理，处理跨应用的数据共享
提供统一的用户认证和权限管理
02.技术实现
a.应用注册
通过registerMicroApps函数注册子应用信息
配置子应用的基本信息和加载规则
---
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:8080',
container: '#vue-app',
activeRule: '/vue-app',
}
]);
start();
---
b.生命周期钩子
在应用启动、加载、卸载等关键节点执行自定义逻辑
支持beforeLoad、beforeMount、afterMount等钩子函数
---
registerMicroApps([
{
name: 'vue-app',
// ...其他配置
props: { globalData: 'shared-data' }
}
], {
beforeLoad: [
app => console.log(`${app.name} loading...`)
],
beforeMount: [
app => console.log(`${app.name} mounting...`)
]
});
---
c.启动配置
配置沙箱、预加载、样式隔离等全局参数
控制整个微前端系统的运行行为
03.架构设计
a.入口文件
主应用的main.js或main.ts作为整个系统的入口点
负责初始化Qiankun并启动微前端系统
b.容器管理
在主应用中为每个子应用准备独立的DOM容器
管理容器的显示隐藏和样式控制
c.全局配置
设置全局的公共资源、样式主题和基础配置
为所有子应用提供一致的基础环境
2.3 子应用（Micro App）
01.基本概念
a.独立应用
每个子应用都是完整的前端应用，可以独立开发、测试和部署
具备自己的路由、状态管理和业务逻辑
b.生命周期
实现bootstrap、mount、unmount三个核心生命周期钩子
与主应用进行交互和状态同步
c.技术栈自由
可以使用任意前端框架和技术栈开发
不受主应用技术栈的限制
02.生命周期实现
a.bootstrap钩子
子应用初始化时调用，通常用于准备运行环境
只会在子应用首次加载时调用一次
---
export async function bootstrap() {
console.log('子应用bootstrap');
// 初始化应用状态，准备资源
}
---
b.mount钩子
子应用挂载到DOM时调用，渲染应用界面
每次激活子应用时都会调用
---
export async function mount(props) {
console.log('子应用mount', props);
// 获取主应用传递的props
// 挂载应用到指定容器
const { container } = props;
render(container ? container.querySelector('#app') : '#app');
}
---
c.unmount钩子
子应用卸载时调用，清理资源和事件监听
确保应用完全退出，避免内存泄漏
---
export async function unmount() {
console.log('子应用unmount');
// 卸载应用，清理资源
instance.$destroy?.();
instance = null;
}
---
03.运行模式
a.独立运行
子应用可以独立开发调试，不依赖主应用环境
通过检测window.__POWERED_BY_QIANKUN__判断运行模式
---
if (!window.__POWERED_BY_QIANKUN__) {
// 独立运行时直接挂载
render();
}
---
b.集成运行
在主应用中作为子模块运行，接收主应用的props和配置
遵循主应用的生命周期管理规则
c.热更新支持
开发环境支持热更新，提升开发效率
与主应用的热更新机制相互配合
04.配置要求
a.打包配置
必须输出UMD或SystemJS格式，支持动态加载
配置正确的publicPath，确保静态资源路径正确
---
// webpack.config.js
module.exports = {
output: {
library: 'vueApp',
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${appName}`
}
};
---
b.路由配置
配置base路径，与主应用的路由规则保持一致
支持history模式的路由配置
---
const router = new VueRouter({
mode: 'history',
base: window.__POWERED_BY_QIANKUN__ ? '/vue-app' : '/',
routes
});
---
c.样式隔离
配置CSS作用域，避免样式污染其他应用
可以使用CSS Modules或样式前缀方案
2.4 路由系统
01.路由架构
a.主应用路由
负责一级路由的管理和分发
决定激活哪个子应用
b.子应用路由
管理应用内部的路由逻辑
处理页面级别的导航和状态
c.嵌套路由
主应用路由与子应用路由形成嵌套结构
支持深层路由和应用间导航
02.路由匹配
a.activeRule配置
通过activeRule配置子应用的路由匹配规则
支持精确匹配和通配符匹配
---
registerMicroApps([
{
name: 'vue-app',
activeRule: '/vue-app',
// 精确匹配 /vue-app 开头的所有路径
},
{
name: 'react-app',
activeRule: '/react-app',
// 支持子路由如 /react-app/page1, /react-app/page2
}
]);
---
b.路由优先级
按照注册顺序进行路由匹配
第一个匹配的子应用会被激活
c.动态路由
支持动态添加和移除子应用的路由规则
可以根据用户权限动态调整可访问的应用
03.路由切换
a.应用激活
根据当前URL自动激活对应的子应用
如果URL不匹配任何子应用，显示主应用默认页面
b.应用卸载
切换到其他应用时自动卸载当前子应用
调用unmount生命周期钩子清理资源
c.状态保持
可以通过配置保持子应用状态，避免重新加载
适用于需要保持用户操作场景的应用
04.导航控制
a.主应用导航
提供全局导航菜单，控制子应用间的切换
可以根据用户权限显示或隐藏导航项
b.子应用导航
子应用内部导航不会影响其他应用的显示
通过编程式导航实现应用内页面跳转
c.跨应用导航
支持从子应用直接导航到其他子应用
通过主应用的路由API实现跨应用跳转
2.5 样式隔离
01.隔离方案
a.严格样式隔离
使用Shadow DOM技术实现完全的样式隔离
每个子应用运行在独立的DOM树中
---
start({
sandbox: {
strictStyleIsolation: true
}
});
---
b.实验性样式隔离
通过CSS作用域和样式前缀实现样式隔离
性能更好但隔离效果不如Shadow DOM
---
start({
sandbox: {
experimentalStyleIsolation: true
}
});
---
c.手动样式隔离
通过CSS Modules、BEM等命名约定避免样式冲突
需要开发者主动管理和控制样式命名
02.样式处理
a.动态样式加载
子应用加载时自动注入样式文件
卸载时自动清理样式，避免样式残留
b.样式作用域
为子应用样式添加特定的作用域选择器
确保样式只影响对应的应用容器
c.样式优先级
处理主应用和子应用样式优先级冲突
通过CSS权重和加载顺序控制样式应用
03.样式优化
a.公共样式提取
将公共样式提取到主应用中，减少重复加载
子应用只加载自己的私有样式
b.样式压缩
自动压缩CSS文件，减少传输大小
移除未使用的样式规则
c.样式缓存
合理利用浏览器缓存机制
通过文件哈希管理样式版本
04.常见问题
a.全局样式污染
子应用的全局样式可能影响主应用或其他子应用
解决方案：使用作用域样式或样式隔离
b.样式覆盖问题
主应用样式可能覆盖子应用样式
解决方案：提高子应用样式优先级或使用样式隔离
c.字体图标冲突
不同应用使用相同的字体图标可能产生冲突
解决方案：使用不同的字体前缀或图标命名空间
2.6 JS沙箱
01.沙箱类型
a.Proxy沙箱（推荐）
使用ES6 Proxy API实现JavaScript环境隔离
支持动态监听和拦截全局变量访问
优点：隔离效果好，性能优秀
缺点：不支持IE11
b.快照沙箱
通过前后对比快照实现环境隔离
适用于不支持Proxy的浏览器环境
优点：兼容性好
缺点：性能相对较差，内存占用较高
c.快照沙箱实现
在应用激活前记录全局变量快照
应用卸载时恢复到原始状态
通过深拷贝保存状态变化
02.沙箱配置
a.默认启用
Qiankun默认开启JS沙箱保护
可以通过配置关闭沙箱功能
---
start({
sandbox: {
strictStyleIsolation: true,
experimentalStyleIsolation: false,
// 关闭JS沙箱
sandbox: false
}
});
---
b.沙箱参数
配置沙箱的行为和隔离级别
支持自定义沙箱实现
c.性能优化
根据应用特点选择合适的沙箱策略
平衡安全性和性能需求
03.全局变量管理
a.变量隔离
每个子应用拥有独立的全局变量环境
避免变量名冲突和意外覆盖
b.API拦截
拦截window对象的读写操作
控制子应用对全局环境的访问
c.安全限制
限制子应用的危险操作
如修改location对象、弹出alert等
04.沙箱通信
a.官方通信API
通过props传递数据和方法
实现主子应用间的安全通信
b.全局事件
使用自定义事件进行应用间通信
需要谨慎使用避免安全风险
c.共享状态
通过全局状态管理库实现状态共享
确保状态的一致性和可预测性
2.7 通信机制
01.Props传递
a.主应用传递
在注册子应用时通过props传递数据和方法
支持传递普通数据和函数
---
registerMicroApps([
{
name: 'vue-app',
props: {
userInfo: getUserInfo(),
globalState: getGlobalState(),
actions: {
onGlobalStateChange,
setGlobalState
}
}
}
]);
---
b.子应用接收
在mount生命周期钩子中接收props参数
解构使用主应用传递的数据和方法
---
export async function mount(props) {
const { userInfo, globalState, actions } = props;
console.log('主应用传递的数据:', userInfo);
// 监听全局状态变化
actions.onGlobalStateChange((state, prevState) => {
console.log('状态变化:', state, prevState);
});
render(props);
}
---
c.实时更新
支持主应用向子应用推送实时数据更新
子应用可以监听变化并做出响应
02.全局状态管理
a.主应用状态
在主应用中维护全局状态
提供统一的读写接口
---
import { initGlobalState } from 'qiankun';
const { onGlobalStateChange, setGlobalState } = initGlobalState({
user: 'guest',
theme: 'light'
});
// 主应用修改全局状态
setGlobalState({ user: 'admin' });
---
b.状态同步
所有应用共享同一份全局状态
状态变化时自动通知所有应用
c.状态监听
每个应用可以监听全局状态的变化
在状态变化时执行相应的业务逻辑
03.事件通信
a.自定义事件
使用浏览器原生Event API进行通信
支持应用间的事件广播和监听
---
// 发送事件
window.dispatchEvent(new CustomEvent('micro-app-event', {
detail: { type: 'data-update', data: newData }
}));
// 监听事件
window.addEventListener('micro-app-event', (event) => {
console.log('收到事件:', event.detail);
});
---
b.事件总线
实现专门的事件总线用于应用间通信
提供更丰富的事件管理功能
c.消息队列
对于复杂的异步通信场景，可以使用消息队列
确保消息的可靠传递和处理
04.最佳实践
a.数据流向
建立清晰的数据流向，避免混乱的依赖关系
推荐单向数据流模式
b.接口设计
设计简洁清晰的通信接口
避免过度复杂的通信逻辑
c.错误处理
完善的错误处理机制
避免通信错误导致应用崩溃
d.性能考虑
避免频繁的跨应用通信
合理使用缓存和批处理
3 快速开始
3.1 环境准备
01.开发环境要求
a.Node.js版本
推荐使用Node.js 16.x或更高版本
确保npm或yarn包管理器可用
检查环境：node -v 和 npm -v
b.开发工具
推荐使用VS Code或WebStorm等现代IDE
安装Vue DevTools或React Developer Tools
配置ESLint和Prettier代码规范工具
c.网络环境
确保开发机器可以访问npm镜像
配置稳定的网络连接用于依赖下载
02.项目初始化
a.创建项目根目录
mkdir qiankun-demo
cd qiankun-demo
创建主应用和子应用的目录结构
b.安装Qiankun
# 主应用安装
npm install qiankun -S
或使用yarn：yarn add qiankun
c.版本确认
检查Qiankun版本是否为最新稳定版
查看官方文档确认版本兼容性
03.项目结构规划
a.目录结构
qiankun-demo/
├── main-app/ # 主应用
│ ├── src/
│ ├── public/
│ └── package.json
├── micro-apps/ # 子应用目录
│ ├── vue-app/ # Vue子应用
│ └── react-app/ # React子应用
└── README.md
b.开发规范
统一代码风格和命名规范
制定子应用开发约定
确定部署和发布流程
3.2 创建主应用
01.主应用初始化
a.使用脚手架创建
# 使用Vue CLI创建Vue3主应用
npm create vue@latest main-app
# 使用Create React App创建React主应用
npx create-react-app main-app
b.安装依赖
cd main-app
npm install qiankun -S
安装必要的开发依赖和UI组件库
c.项目配置
配置TypeScript、ESLint、Prettier等工具
设置开发服务器端口和代理配置
02.主应用基础配置
a.路由配置
# Vue Router配置示例
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/vue-app/*',
name: 'VueApp',
component: () => import('@/views/MicroContainer.vue')
}
]
});
b.入口文件配置
# main.js文件
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
c.容器组件
# MicroContainer.vue
<template>
<div id="micro-app-container"></div>
</template>
3.3 创建子应用
01.Vue子应用创建
a.项目初始化
npm create vue@latest vue-app
cd vue-app
npm install
b.基本配置
配置应用名称和基础设置
设置开发服务器端口（建议8081）
配置路由和状态管理
02.React子应用创建
a.项目初始化
npx create-react-app react-app
cd react-app
npm install
b.开发配置
配置Webpack以支持微前端要求
设置React Router用于路由管理
配置开发服务器和热更新
03.子应用通用配置
a.端口规划
避免端口冲突，为每个子应用分配不同端口
主应用：8080，Vue子应用：8081，React子应用：8082
b.CORS配置
在子应用中配置允许跨域访问
确保主应用可以正确加载子应用资源
3.4 基础配置
01.主应用Qiankun配置
a.子应用注册
# 创建微应用配置文件
// src/micro-apps.js
export default [
{
name: 'vue-app',
entry: '//localhost:8081',
container: '#micro-app-container',
activeRule: '/vue-app',
props: {
routerBase: '/vue-app'
}
},
{
name: 'react-app',
entry: '//localhost:8082',
container: '#micro-app-container',
activeRule: '/react-app'
}
];
b.启动Qiankun
# main.js中添加Qiankun配置
import { registerMicroApps, start } from 'qiankun';
import microApps from './micro-apps';
registerMicroApps(microApps, {
beforeLoad: (app) => {
console.log(`${app.name} 加载中...`);
},
beforeMount: (app) => {
console.log(`${app.name} 挂载中...`);
}
});
start({
sandbox: {
experimentalStyleIsolation: true
},
prefetch: true
});
---
02.Vue子应用配置
a.生命周期钩子
# 修改 src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
let instance = null;
function render(props = {}) {
const { container } = props;
instance = createApp(App);
instance.use(router);
instance.mount(container ? container.querySelector('#app') : '#app');
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
// 导出生命周期钩子
export async function bootstrap() {
console.log('Vue应用 bootstrap');
}
export async function mount(props) {
console.log('Vue应用 mount', props);
render(props);
}
export async function unmount() {
console.log('Vue应用 unmount');
instance.unmount();
instance = null;
}
b.路由配置
# src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{ path: '/', component: () => import('@/views/Home.vue') },
{ path: '/about', component: () => import('@/views/About.vue') }
];
const router = createRouter({
history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/vue-app' : '/'),
routes
});
export default router;
c.Vite配置
# vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
base: '/vue-app/',
server: {
port: 8081,
cors: true,
headers: {
'Access-Control-Allow-Origin': '*'
}
},
build: {
target: 'esnext',
minify: 'esbuild',
rollupOptions: {
output: {
format: 'es',
entryFileNames: 'assets/[name].js',
manualChunks: undefined
}
}
}
});
---
03.React子应用配置
a.生命周期钩子
# 修改 src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
let root = null;
function render(props) {
const { container } = props;
root = ReactDOM.createRoot(
container ? container.querySelector('#root') : document.getElementById('root')
);
root.render(
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/react-app' : '/'}>
<App />
</BrowserRouter>
);
}
if (!window.__POWERED_BY_QIANKUN__) {
render({});
}
export async function bootstrap() {
console.log('React应用 bootstrap');
}
export async function mount(props) {
console.log('React应用 mount', props);
render(props);
}
export async function unmount() {
console.log('React应用 unmount');
root?.unmount();
}
b.Webpack配置
# config-overrides.js
const { name } = require('./package.json');
module.exports = {
webpack: (config) => {
config.output.library = `${name}-[name]`;
config.output.libraryTarget = 'umd';
config.output.globalObject = 'window';
config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;
return config;
},
devServer: (configFunction) => {
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
config.headers = {
'Access-Control-Allow-Origin': '*',
};
config.port = 8082;
return config;
};
}
};
3.5 启动运行
01.开发环境启动
a.启动主应用
cd main-app
npm run dev
访问 http://localhost:8080
b.启动Vue子应用
cd vue-app
npm run dev
访问 http://localhost:8081
c.启动React子应用
cd react-app
npm start
访问 http://localhost:8082
02.应用访问测试
a.主应用访问
打开浏览器访问主应用地址
检查主应用是否正常运行
b.子应用切换
通过导航菜单切换到不同子应用
观察子应用加载和切换效果
c.路由测试
直接访问子应用路由地址
测试应用间路由跳转功能
03.开发调试
a.浏览器控制台
检查控制台日志输出
观察应用加载过程和错误信息
b.网络面板
监控资源加载情况
检查是否存在跨域或加载失败问题
c.开发者工具
使用Vue DevTools或React DevTools
调试子应用组件状态和性能
3.6 验证测试
01.基础功能测试
a.应用加载
验证子应用能够正常加载
检查资源文件是否正确加载
b.路由切换
测试主应用与子应用间的路由切换
验证URL变化和页面渲染
c.样式隔离
检查子应用样式是否相互影响
验证样式隔离效果
02.功能验证清单
a.生命周期测试
[ ] bootstrap钩子是否正常执行
[ ] mount钩子是否接收到正确的props
[ ] unmount钩子是否正确清理资源
b.路由功能
[ ] 主应用路由正常工作
[ ] 子应用内部路由正常工作
[ ] 跨应用路由跳转正常
c.样式测试
[ ] 主应用样式不受子应用影响
[ ] 子应用样式相互隔离
[ ] 全局样式正确应用
d.性能测试
[ ] 应用加载速度合理
[ ] 内存占用正常
[ ] 无明显性能问题
03.常见问题排查
a.加载失败
检查子应用地址是否正确
确认CORS配置是否生效
验证网络连接是否正常
b.路由冲突
检查activeRule配置是否正确
确认路由配置是否有冲突
验证base路径设置
c.样式问题
检查样式隔离配置
确认样式文件加载顺序
验证CSS作用域设置
04.测试报告
a.测试结果记录
记录每个测试项的执行结果
标记测试通过和失败的项目
b.问题汇总
汇总测试过程中发现的问题
制定问题修复计划
c.优化建议
根据测试结果提出优化建议
规划后续改进方向
4 子应用接入
4.1 生命周期钩子
01.三大核心钩子
a.bootstrap钩子
功能：子应用初始化时调用，用于准备运行环境
调用时机：只在子应用首次加载时调用一次
用途：初始化全局状态、准备资源、配置环境
---
export async function bootstrap() {
console.log('子应用启动初始化');
// 初始化应用配置
await initAppConfig();
// 预加载必要资源
await preloadResources();
// 设置全局变量
window.microAppGlobal = {
version: '1.0.0',
name: 'vue-app'
};
}
---
b.mount钩子
功能：子应用挂载到DOM时调用，负责渲染应用界面
调用时机：每次激活子应用时都会调用
参数：接收主应用传递的props对象
---
export async function mount(props) {
console.log('子应用挂载', props);
// 获取容器和配置
const { container, routerBase, userInfo } = props;
// 设置全局数据
window.userInfo = userInfo;
window.routerBase = routerBase;
// 挂载应用到指定容器
const targetContainer = container ?
container.querySelector('#app') :
document.getElementById('app');
renderApp(targetContainer);
// 注册全局事件监听
setupGlobalEventListeners();
}
---
c.unmount钩子
功能：子应用卸载时调用，清理资源和事件监听
调用时机：切换到其他应用或关闭应用时
用途：释放内存、清理事件监听、保存状态
---
export async function unmount() {
console.log('子应用卸载');
// 卸载应用实例
if (appInstance) {
appInstance.$destroy?.();
appInstance.unmount?.();
appInstance = null;
}
// 清理事件监听
cleanupEventListeners();
// 清理全局变量
delete window.userInfo;
delete window.routerBase;
// 保存应用状态（可选）
saveAppState();
}
---
02.钩子使用最佳实践
a.错误处理
在每个钩子中添加适当的错误处理
确保异常不会影响整个微前端系统
---
export async function mount(props) {
try {
// 挂载逻辑
await renderApp(props);
} catch (error) {
console.error('应用挂载失败:', error);
// 错误上报
reportError(error);
// 显示错误页面
showErrorPage(error);
}
}
---
b.性能优化
在bootstrap中预加载资源，减少mount时的等待时间
合理使用缓存机制，避免重复加载
c.状态管理
在unmount时保存重要状态，下次mount时恢复
避免用户操作丢失
03.钩子调试
a.日志记录
在每个钩子中添加详细的日志记录
跟踪应用状态变化和执行时间
b.性能监控
监控钩子执行时间，识别性能瓶颈
使用performance API进行性能分析
c.状态检查
在钩子执行前后检查应用状态
确保状态转换的正确性
4.2 路由配置
01.Vue应用路由配置
a.基础配置
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/user/:id',
name: 'UserDetail',
component: () => import('@/views/UserDetail.vue')
},
{
path: '/settings',
name: 'Settings',
component: () => import('@/views/Settings.vue')
}
];
const router = createRouter({
history: createWebHistory(
window.__POWERED_BY_QIANKUN__ ? '/vue-app' : '/'
),
routes
});
b.动态路由
// 根据用户权限动态添加路由
export function addDynamicRoutes(userPermissions) {
if (userPermissions.includes('admin')) {
router.addRoute({
path: '/admin',
name: 'Admin',
component: () => import('@/views/Admin.vue')
});
}
}
c.路由守卫
router.beforeEach((to, from, next) => {
// 检查用户权限
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login');
return;
}
// 记录路由跳转
trackPageView(to.path);
next();
});
02.React应用路由配置
a.基础配置
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
const basename = window.__POWERED_BY_QIANKUN__ ? '/react-app' : '/';
return (
<BrowserRouter basename={basename}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/users/:id" element={<UserDetail />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</BrowserRouter>
);
}
b.嵌套路由
function Layout() {
return (
<div>
<Header />
<main>
<Outlet />
</main>
<Footer />
</div>
);
}
// 在路由配置中使用嵌套路由
<Route path="/" element={<Layout />}>
<Route index element={<Dashboard />} />
<Route path="profile" element={<Profile />} />
<Route path="notifications" element={<Notifications />} />
</Route>
c.路由钩子
import { useNavigate, useLocation } from 'react-router-dom';
function useCustomRouter() {
const navigate = useNavigate();
const location = useLocation();
const customNavigate = (path, options = {}) => {
// 记录路由跳转
trackNavigation(path);
// 执行跳转
navigate(path, options);
};
return { customNavigate, location };
}
03.Angular应用路由配置
a.模块配置
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, {
useHash: !window.__POWERED_BY_QIANKUN__,
baseHref: window.__POWERED_BY_QIANKUN__ ? '/angular-app' : '/'
})
],
exports: [RouterModule]
})
export class AppRoutingModule {}
b.路由守卫
@Injectable()
export class AuthGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): boolean {
if (this.authService.isLoggedIn()) {
return true;
}
this.router.navigate(['/login']);
return false;
}
}
4.3 静态资源处理
01.publicPath配置
a.为什么需要publicPath
解决子应用在不同环境下静态资源路径问题
确保CSS、JS、图片等资源能够正确加载
b.自动配置方案
// webpack方式
// webpack.config.js
module.exports = {
output: {
publicPath: process.env.NODE_ENV === 'development' ? '/' : './'
}
};
// Vite方式
// vite.config.js
export default defineConfig({
base: process.env.NODE_ENV === 'development' ? '/' : './'
});
c.Qiankun专用配置
// 在子应用入口文件中
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
02.资源路径处理
a.CSS资源
/* 相对路径引用 */
.background {
background-image: url('./images/bg.jpg');
}
/* 绝对路径引用 */
.logo {
background-image: url('/static/images/logo.png');
}
b.JavaScript模块
// 动态导入
const loadModule = async () => {
const module = await import('./utils/helper');
return module;
};
// 静态资源引用
import imageUrl from './assets/image.png';
c.HTML模板
<!-- 使用模板变量 -->
<img src="${require('./assets/logo.png')}" alt="Logo" />
<!-- 使用public目录 -->
<link rel="icon" href="/favicon.ico">
03.资源优化策略
a.资源压缩
开启Gzip压缩，减少传输大小
使用图片压缩工具优化图片资源
b.缓存策略
配置合适的缓存策略
使用文件哈希避免缓存问题
c.CDN配置
将静态资源部署到CDN
配置多域名加载提升并发性能
4.4 多框架接入
01.Vue2应用接入
a.生命周期实现
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
router,
store,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app');
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {}
export async function mount(props) { render(props); }
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
}
b.Webpack配置
// vue.config.js
module.exports = {
devServer: {
port: 8081,
headers: {
'Access-Control-Allow-Origin': '*'
}
},
configureWebpack: {
output: {
library: 'vue2App',
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_vue2App`
}
}
};
c.路由配置
const router = new VueRouter({
mode: 'history',
base: window.__POWERED_BY_QIANKUN__ ? '/vue2-app' : '/',
routes
});
02.React应用接入
a.生命周期实现
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
let root = null;
function render(props) {
const { container } = props;
const dom = container ? container.querySelector('#root') : document.getElementById('root');
root = ReactDOM.createRoot(dom);
root.render(<App />);
}
if (!window.__POWERED_BY_QIANKUN__) {
render({});
}
export async function bootstrap() {}
export async function mount(props) { render(props); }
export async function unmount() {
root?.unmount();
root = null;
}
b.Webpack配置
// config-overrides.js
module.exports = {
webpack: (config) => {
config.output.library = 'reactApp';
config.output.libraryTarget = 'umd';
config.output.globalObject = 'window';
return config;
},
devServer: (configFunction) => {
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
config.headers = { 'Access-Control-Allow-Origin': '*' };
config.port = 8082;
return config;
};
}
};
03.Angular应用接入
a.生命周期实现
// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
let appRef: any = null;
export async function bootstrap() {
console.log('Angular应用启动');
}
export async function mount(props: any) {
const { container } = props;
const appContainer = container || document;
appRef = await platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
appContainer.appendChild(appRef.instance.rootElement.nativeElement);
}
export async function unmount() {
appRef?.destroy();
appRef = null;
}
if (!window.__POWERED_BY_QIANKUN__) {
mount({});
}
b.Angular配置
// angular.json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angular-app",
"index": "src/index.html",
"main": "src/main.ts",
"outputHashing": "none"
}
}
}
04.jQuery应用接入
a.生命周期实现
let $container = null;
export async function bootstrap() {
console.log('jQuery应用启动');
}
export async function mount(props) {
const { container } = props;
$container = container ? $(container).find('#app') : $('#app');
// 初始化jQuery应用
initJQueryApp();
}
export async function unmount() {
if ($container) {
$container.empty();
$container = null;
}
// 清理事件监听
$(document).off('click.jquery-app');
}
4.5 Webpack配置
01.输出配置
a.库格式配置
module.exports = {
output: {
library: 'microApp',
libraryTarget: 'umd',
libraryExport: 'default',
globalObject: 'window',
chunkLoadingGlobal: 'webpackJsonp_microApp',
publicPath: 'auto'
}
};
b.库格式选择
umd: 通用模块定义，支持多种模块系统
var: 直接挂载到全局变量
es: ES模块格式（需要现代浏览器）
system: SystemJS格式
c.文件命名
output: {
filename: 'js/[name].[contenthash:8].js',
chunkFilename: 'js/[name].[contenthash:8].chunk.js'
}
02.开发服务器配置
a.端口和跨域
devServer: {
port: 8081,
host: '0.0.0.0',
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
}
}
b.热更新配置
devServer: {
hot: true,
hotOnly: true,
overlay: {
warnings: false,
errors: true
}
}
c.代理配置
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
03.模块解析配置
a.别名配置
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@utils': path.resolve(__dirname, 'src/utils')
}
}
b.扩展名配置
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.json']
}
c.外部依赖
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
04.优化配置
a.代码分割
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
name: 'vendor',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
},
common: {
name: 'common',
minChunks: 2,
priority: 5,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
}
b.压缩配置
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
sourceMap: false
}),
new OptimizeCSSAssetsPlugin({})
]
}
4.6 Vite配置
01.基础配置
a.应用配置
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
base: '/vue-app/',
server: {
port: 8081,
cors: true,
origin: 'http://localhost:8081'
}
});
b.路径别名
resolve: {
alias: {
'@': '/src',
'@components': '/src/components',
'@utils': '/src/utils'
}
}
c.环境变量
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version)
}
02.构建配置
a.输出格式
build: {
lib: {
entry: 'src/main.js',
name: 'VueMicroApp',
formats: ['es', 'umd']
},
rollupOptions: {
external: ['vue', 'vue-router', 'vuex'],
output: {
globals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex'
}
}
}
}
b.代码分割
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'vuex'],
utils: ['axios', 'lodash']
}
}
}
}
c.资源处理
build: {
assetsInlineLimit: 4096,
assetsDir: 'assets',
sourcemap: false
}
03.开发配置
a.服务器配置
server: {
port: 8081,
strictPort: true,
cors: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
}
}
b.代理配置
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
c.HMR配置
server: {
hmr: {
overlay: false
}
}
04.插件配置
a.vue插件
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('x-')
}
}
})
]
});
b.TypeScript支持
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
});
c.CSS预处理器
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/styles/variables.scss";'
}
}
}
});
5 进阶功能
5.1 主子应用通信
01.Props传递机制
a.主应用传递数据
// 在主应用中注册子应用时传递props
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:8081',
container: '#micro-app-container',
activeRule: '/vue-app',
props: {
userInfo: {
id: 123,
name: '张三',
role: 'admin'
},
globalConfig: {
theme: 'dark',
language: 'zh-CN',
apiBaseUrl: 'https://api.example.com'
},
actions: {
onGlobalStateChange,
setGlobalState,
navigateTo,
showMessage
}
}
}
]);
b.子应用接收数据
// 子应用mount钩子中接收props
export async function mount(props) {
console.log('接收主应用数据:', props);
const { userInfo, globalConfig, actions } = props;
// 设置用户信息
store.commit('setUserInfo', userInfo);
// 设置全局配置
store.commit('setGlobalConfig', globalConfig);
// 注册全局方法
window.globalActions = actions;
// 开始监听全局状态变化
actions.onGlobalStateChange(handleGlobalStateChange);
renderApp(props);
}
const handleGlobalStateChange = (state, prevState) => {
console.log('全局状态变化:', state, prevState);
// 处理主题变化
if (state.theme !== prevState.theme) {
applyTheme(state.theme);
}
// 处理语言变化
if (state.language !== prevState.language) {
changeLanguage(state.language);
}
};
---
c.动态更新props
// 主应用动态更新传递给子应用的数据
function updateMicroAppProps(appName, newProps) {
const app = microApps.find(app => app.name === appName);
if (app) {
app.props = { ...app.props, ...newProps };
}
}
// 示例：更新用户信息
updateMicroAppProps('vue-app', {
userInfo: {
id: 123,
name: '张三',
role: 'superadmin',
lastLogin: new Date()
}
});
02.事件通信机制
a.自定义事件系统
// 主应用创建事件总线
class EventBus {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
off(event, callback) {
if (!this.events[event]) return;
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
emit(event, data) {
if (!this.events[event]) return;
this.events[event].forEach(callback => callback(data));
}
}
// 在main.js中创建全局事件总线
window.microEventBus = new EventBus();
---
b.跨应用事件通信
// 主应用发送事件
window.microEventBus.emit('user-logout', {
userId: 123,
timestamp: Date.now()
});
// 子应用监听事件
export async function mount(props) {
const { container } = props;
// 监听用户登出事件
window.microEventBus.on('user-logout', handleUserLogout);
renderApp(container);
}
const handleUserLogout = (data) => {
console.log('收到用户登出事件:', data);
// 清理用户数据
store.commit('clearUserInfo');
// 跳转到登录页
router.push('/login');
// 显示提示信息
alert('用户已登出');
};
export async function unmount() {
// 移除事件监听
window.microEventBus.off('user-logout', handleUserLogout);
// 其他清理工作...
}
---
c.事件命名空间
// 使用命名空间避免事件冲突
const EVENT_NAMESPACES = {
USER: 'user:',
ORDER: 'order:',
PRODUCT: 'product:'
};
// 发送带命名空间的事件
window.microEventBus.emit(`${EVENT_NAMESPACES.USER}logout`, userData);
window.microEventBus.emit(`${EVENT_NAMESPACES.ORDER}created`, orderData);
// 监听特定命名空间的事件
window.microEventBus.on(`${EVENT_NAMESPACES.USER}logout`, handleUserLogout);
window.microEventBus.on(`${EVENT_NAMESPACES.ORDER}created`, handleOrderCreated);
03.PostMessage通信
a.主应用发送消息
// 主应用向子应用发送消息
const microAppIframe = document.querySelector('#micro-app-iframe');
if (microAppIframe) {
microAppIframe.contentWindow.postMessage({
type: 'MAIN_APP_MESSAGE',
data: {
action: 'updateUserInfo',
payload: newUserInfo
}
}, '*');
}
b.子应用接收消息
// 子应用监听消息
window.addEventListener('message', (event) => {
if (event.data.type === 'MAIN_APP_MESSAGE') {
const { action, payload } = event.data.data;
switch (action) {
case 'updateUserInfo':
updateUserInfo(payload);
break;
case 'showNotification':
showNotification(payload);
break;
default:
console.warn('未知的消息类型:', action);
}
}
});
c.子应用回复消息
// 子应用回复消息给主应用
function replyToMainApp(response) {
window.parent.postMessage({
type: 'MICRO_APP_RESPONSE',
data: response
}, '*');
}
5.2 全局状态管理
01.Qiankun全局状态API
a.初始化全局状态
// 主应用初始化全局状态
import { initGlobalState } from 'qiankun';
const initialState = {
userInfo: {
id: null,
name: '',
role: '',
permissions: []
},
globalConfig: {
theme: 'light',
language: 'zh-CN',
apiBaseUrl: process.env.VUE_APP_API_BASE_URL
},
appStates: {
vueApp: { active: false, notifications: [] },
reactApp: { active: false, notifications: [] }
}
};
const { onGlobalStateChange, setGlobalState, getGlobalState } = initGlobalState(initialState);
// 将全局状态管理函数暴露到全局
window.globalState = {
on: onGlobalStateChange,
set: setGlobalState,
get: getGlobalState
};
---
b.监听全局状态变化
// 在主应用中监听状态变化
window.globalState.on((state, prevState) => {
console.log('全局状态变化:', state, prevState);
// 处理主题变化
if (state.globalConfig.theme !== prevState.globalConfig.theme) {
applyTheme(state.globalConfig.theme);
}
// 处理用户登录状态变化
if (state.userInfo.id !== prevState.userInfo.id) {
handleUserLoginChange(state.userInfo);
}
// 更新应用活跃状态
updateAppActiveStates(state.appStates);
});
c.修改全局状态
// 修改用户信息
function updateUserInfo(newUserInfo) {
window.globalState.set({
userInfo: {
...window.globalState.get().userInfo,
...newUserInfo
}
});
}
// 切换主题
function switchTheme(theme) {
window.globalState.set({
globalConfig: {
...window.globalState.get().globalConfig,
theme
}
});
}
// 更新应用状态
function updateAppStatus(appName, status) {
const currentState = window.globalState.get();
window.globalState.set({
appStates: {
...currentState.appStates,
[appName]: {
...currentState.appStates[appName],
...status
}
}
});
}
---
02.子应用状态同步
a.子应用接入全局状态
// 子应用mount钩子中接入全局状态
export async function mount(props) {
const { onGlobalStateChange, setGlobalState, getGlobalState } = props;
// 保存全局状态函数到组件实例
instance.globalState = {
on: onGlobalStateChange,
set: setGlobalState,
get: getGlobalState
};
// 监听全局状态变化
onGlobalStateChange(handleGlobalStateChange, true);
// 获取初始全局状态
const globalState = getGlobalState();
updateLocalState(globalState);
renderApp();
}
const handleGlobalStateChange = (state, prevState) => {
console.log('子应用收到全局状态变化:', state, prevState);
// 更新本地状态
updateLocalState(state);
// 触发组件重新渲染
instance.$forceUpdate();
};
const updateLocalState = (globalState) => {
// 更新用户信息
if (globalState.userInfo) {
store.commit('setUserInfo', globalState.userInfo);
}
// 更新全局配置
if (globalState.globalConfig) {
store.commit('setGlobalConfig', globalState.globalConfig);
}
// 更新应用状态
if (globalState.appStates) {
const appState = globalState.appStates['vue-app'];
if (appState) {
store.commit('setAppState', appState);
}
}
};
---
b.子应用修改全局状态
// 子应用中修改全局状态
export function setGlobalState(changes) {
if (instance && instance.globalState && instance.globalState.set) {
instance.globalState.set(changes);
}
}
// 示例：更新用户偏好设置
export function updateUserPreferences(preferences) {
setGlobalState({
userInfo: {
...instance.globalState.get().userInfo,
preferences
}
});
}
// 示例：通知主应用子应用状态变化
export function notifyAppStateChange(appState) {
setGlobalState({
appStates: {
...instance.globalState.get().appStates,
'vue-app': appState
}
});
}
---
03.状态持久化
a.本地存储集成
// 状态持久化工具
class StatePersistence {
constructor(key = 'qiankun-global-state') {
this.storageKey = key;
}
save(state) {
try {
const stateToSave = {
userInfo: state.userInfo,
globalConfig: state.globalConfig,
timestamp: Date.now()
};
localStorage.setItem(this.storageKey, JSON.stringify(stateToSave));
} catch (error) {
console.error('保存状态失败:', error);
}
}
load() {
try {
const saved = localStorage.getItem(this.storageKey);
if (saved) {
const parsed = JSON.parse(saved);
// 检查数据是否过期（24小时）
if (Date.now() - parsed.timestamp < 24 * 60 * 60 * 1000) {
return parsed;
}
}
} catch (error) {
console.error('加载状态失败:', error);
}
return null;
}
clear() {
localStorage.removeItem(this.storageKey);
}
}
const statePersistence = new StatePersistence();
// 在状态变化时自动保存
window.globalState.on((state) => {
statePersistence.save(state);
});
// 应用启动时恢复状态
const savedState = statePersistence.load();
if (savedState) {
window.globalState.set(savedState);
}
b.状态版本管理
// 状态版本管理
const STATE_VERSIONS = {
'1.0': {
migrate: (oldState) => ({
...oldState,
globalConfig: {
theme: 'light',
language: 'zh-CN',
...oldState.globalConfig
}
})
},
'1.1': {
migrate: (oldState) => ({
...oldState,
appStates: oldState.appStates || {}
})
}
};
function migrateState(state, fromVersion, toVersion) {
let migratedState = state;
for (let version = fromVersion; version < toVersion; version++) {
const versionStr = `${version / 10}.0`;
if (STATE_VERSIONS[versionStr] && STATE_VERSIONS[versionStr].migrate) {
migratedState = STATE_VERSIONS[versionStr].migrate(migratedState);
}
}
return migratedState;
}
5.3 公共依赖共享
01.externals配置
a.主应用externals
// 主应用webpack配置
module.exports = {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'element-plus': 'ElementPlus',
lodash: '_',
dayjs: 'dayjs'
}
};
// 在index.html中引入CDN资源
<!-- Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script>
<!-- Vue Router -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.global.prod.js"></script>
<!-- Vuex -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.global.prod.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
b.子应用externals
// 子应用webpack配置
module.exports = {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
};
c.Vite配置方式
// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
external: ['vue', 'vue-router', 'vuex', 'axios'],
output: {
globals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
}
}
}
});
02.Module Federation共享
a.主应用配置
// 主应用webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack');
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'main_app',
remotes: {
// 远程模块配置
},
shared: {
vue: {
singleton: true,
requiredVersion: deps.vue
},
'vue-router': {
singleton: true,
requiredVersion: deps['vue-router']
},
vuex: {
singleton: true,
requiredVersion: deps.vuex
},
axios: {
singleton: true,
requiredVersion: deps.axios
}
}
})
]
};
b.子应用配置
// 子应用webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'vue_app',
filename: 'remoteEntry.js',
exposes: {
'./Component': './src/components/Component.vue'
},
shared: {
vue: {
singleton: true,
requiredVersion: deps.vue
},
'vue-router': {
singleton: true,
requiredVersion: deps['vue-router']
},
vuex: {
singleton: true,
requiredVersion: deps.vuex
}
}
})
]
};
03.运行时共享
a.依赖加载检测
// 依赖检测工具
class DependencyManager {
constructor() {
this.loadedDependencies = new Set();
this.loadingPromises = new Map();
}
async loadDependency(name, version, url) {
if (this.loadedDependencies.has(name)) {
return window[name];
}
if (this.loadingPromises.has(name)) {
return this.loadingPromises.get(name);
}
const loadPromise = this.loadScript(url).then(() => {
this.loadedDependencies.add(name);
this.loadingPromises.delete(name);
return window[name];
});
this.loadingPromises.set(name, loadPromise);
return loadPromise;
}
loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
}
const dependencyManager = new DependencyManager();
// 在子应用中使用
export async function mount(props) {
// 加载共享依赖
const vue = await dependencyManager.loadDependency(
'vue',
'3.2.37',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js'
);
const vueRouter = await dependencyManager.loadDependency(
'vue-router',
'4.1.5',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.global.prod.js'
);
// 使用共享依赖创建应用
const { createApp } = vue;
const { createRouter } = vueRouter;
const app = createApp(App);
const router = createRouter({
history: createWebHistory('/vue-app'),
routes
});
app.use(router);
app.mount(container || '#app');
}
5.4 预加载策略
01.预加载配置
a.全局预加载配置
// 主应用启动配置
start({
prefetch: 'all', // 'all' | 'true' | 'false'
sandbox: {
experimentalStyleIsolation: true
}
});
b.策略选择
// 无预加载：按需加载
start({
prefetch: false
});
// 预加载关键资源
start({
prefetch: true
});
// 预加载所有资源
start({
prefetch: 'all'
});
c.自定义预加载
// 自定义预加载逻辑
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:8081',
container: '#micro-app-container',
activeRule: '/vue-app',
props: {
// 预加载配置
preloadConfig: {
assets: ['/static/common.js', '/static/common.css'],
critical: true
}
}
}
]);
02.智能预加载
a.基于用户行为的预加载
// 用户行为分析
class UserBehaviorAnalyzer {
constructor() {
this.navigationHistory = [];
this.visitFrequency = new Map();
}
recordNavigation(from, to) {
this.navigationHistory.push({ from, to, timestamp: Date.now() });
// 更新访问频率
const currentCount = this.visitFrequency.get(to) || 0;
this.visitFrequency.set(to, currentCount + 1);
}
predictNextApp() {
// 基于历史数据预测下一个可能访问的应用
const recentNavigations = this.navigationHistory.slice(-10);
const frequency = new Map();
recentNavigations.forEach(nav => {
const count = frequency.get(nav.to) || 0;
frequency.set(nav.to, count + 1);
});
// 返回最可能的应用
let maxCount = 0;
let predictedApp = null;
frequency.forEach((count, app) => {
if (count > maxCount) {
maxCount = count;
predictedApp = app;
}
});
return predictedApp;
}
}
const behaviorAnalyzer = new UserBehaviorAnalyzer();
// 路由变化时记录行为
router.afterEach((to, from) => {
behaviorAnalyzer.recordNavigation(from.path, to.path);
// 预测并预加载下一个应用
const nextApp = behaviorAnalyzer.predictNextApp();
if (nextApp) {
preloadApp(nextApp);
}
});
b.基于网络状况的预加载
// 网络状况检测
class NetworkConditionMonitor {
constructor() {
this.connectionType = navigator.connection?.effectiveType || 'unknown';
this.isSlowConnection = this.isConnectionSlow();
}
isConnectionSlow() {
const slowTypes = ['slow-2g', '2g', '3g'];
return slowTypes.includes(this.connectionType);
}
shouldPreload(appSize) {
// 根据网络状况和应用大小决定是否预加载
if (this.isSlowConnection) {
return appSize < 100 * 1024; // 小于100KB才预加载
}
return true;
}
getPreloadDelay() {
// 根据网络状况返回预加载延迟
const delays = {
'slow-2g': 5000,
'2g': 3000,
'3g': 1000,
'4g': 500
};
return delays[this.connectionType] || 1000;
}
}
const networkMonitor = new NetworkConditionMonitor();
function conditionalPreload(appName, appUrl) {
// 获取应用大小（可以通过API获取）
fetch(`${appUrl}/size-info`)
.then(response => response.json())
.then(sizeInfo => {
if (networkMonitor.shouldPreload(sizeInfo.size)) {
setTimeout(() => {
preloadApp(appUrl);
}, networkMonitor.getPreloadDelay());
}
})
.catch(error => {
console.error('获取应用大小信息失败:', error);
});
}
5.5 样式隔离方案
01.严格样式隔离
a.Shadow DOM配置
// 主应用启动配置
start({
sandbox: {
strictStyleIsolation: true
}
});
b.样式穿透处理
// 子应用中需要穿透Shadow DOM的样式
:host {
/* 子应用根元素样式 */
display: block;
width: 100%;
height: 100%;
}
/* 使用:host()选择器设置容器样式 */
:host(.theme-dark) {
background-color: #1a1a1a;
color: #ffffff;
}
/* 使用::slotted()选择器设置插槽内容样式 */
::slotted(.header) {
background-color: #f0f0f0;
padding: 16px;
}
c.全局样式注入
// 向Shadow DOM注入全局样式
function injectGlobalStyles(shadowRoot, styles) {
const styleElement = document.createElement('style');
styleElement.textContent = styles;
shadowRoot.appendChild(styleElement);
}
export async function mount(props) {
const { container } = props;
const shadowContainer = container.attachShadow({ mode: 'open' });
// 注入全局样式
injectGlobalStyles(shadowContainer, `
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
`);
// 创建应用根元素
const appRoot = document.createElement('div');
appRoot.id = 'app';
shadowContainer.appendChild(appRoot);
// 挂载应用
const app = createApp(App);
app.mount(appRoot);
}
02.实验性样式隔离
a.作用域样式
// 主应用启动配置
start({
sandbox: {
experimentalStyleIsolation: true
}
});
b.样式前缀处理
// Qiankun会自动为子应用样式添加作用域前缀
/* 子应用原始样式 */
.container {
padding: 16px;
background-color: #ffffff;
}
.title {
font-size: 18px;
font-weight: bold;
color: #333333;
}
/* Qiankun处理后（自动添加前缀） */
[data-qiankun="vue-app"] .container {
padding: 16px;
background-color: #ffffff;
}
[data-qiankun="vue-app"] .title {
font-size: 18px;
font-weight: bold;
color: #333333;
}
c.样式隔离调试
// 调试样式隔离效果
function debugStyleIsolation() {
const appContainer = document.querySelector('#micro-app-container');
const shadowRoot = appContainer?.shadowRoot;
if (shadowRoot) {
console.log('使用严格样式隔离（Shadow DOM）');
console.log('Shadow DOM内容:', shadowRoot.innerHTML);
} else {
console.log('使用实验性样式隔离');
const appElement = document.querySelector('[data-qiankun]');
if (appElement) {
console.log('应用元素:', appElement);
console.log('应用属性:', appElement.dataset);
}
}
}
03.手动样式隔离
a.CSS Modules
// webpack配置CSS Modules
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
}
]
}
]
}
};
// 组件中使用CSS Modules
import styles from './Component.module.css';
export default {
render() {
return `
<div class="${styles.container}">
<h1 class="${styles.title}">标题</h1>
</div>
`;
}
}
b.BEM命名约定
// BEM命名规范示例
.card { /* Block */ }
.card__header { /* Element */ }
.card__content { /* Element */ }
.card--highlighted { /* Modifier */ }
// Vue组件中使用
<template>
<div class="card card--highlighted">
<div class="card__header">
<h2 class="card__title">{{ title }}</h2>
</div>
<div class="card__content">
<slot></slot>
</div>
</div>
</template>
<style scoped>
.card {
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.card__header {
padding: 16px;
background-color: #f5f5f5;
}
.card__content {
padding: 16px;
}
.card--highlighted {
border-color: #2196f3;
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}
</style>
5.6 错误边界处理
01.全局错误捕获
a.主应用错误边界
// 主应用错误边界组件
import { ErrorBoundary } from './ErrorBoundary';
function App() {
return (
<ErrorBoundary
fallback={<ErrorFallback />}
onError={(error, errorInfo) => {
console.error('主应用错误:', error, errorInfo);
reportError(error, errorInfo);
}}
>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/vue-app/*" element={<MicroContainer appName="vue-app" />} />
<Route path="/react-app/*" element={<MicroContainer appName="react-app" />} />
</Routes>
</Router>
</ErrorBoundary>
);
}
function ErrorFallback() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>应用出现错误</h2>
<p>请刷新页面重试</p>
<button onClick={() => window.location.reload()}>
刷新页面
</button>
</div>
);
}
b.子应用错误处理
// 子应用错误边界
Vue.config.errorHandler = (error, vm, info) => {
console.error('Vue应用错误:', error, info);
// 错误上报
reportError({
type: 'vue-error',
error: error.message,
stack: error.stack,
component: vm?.$options.name,
info: info
});
// 显示错误提示
showErrorMessage('应用出现错误，请刷新页面重试');
};
// 未捕获的Promise错误
window.addEventListener('unhandledrejection', (event) => {
console.error('未处理的Promise错误:', event.reason);
reportError({
type: 'unhandled-promise-rejection',
reason: event.reason
});
event.preventDefault();
});
02.应用加载错误
a.加载失败处理
// 子应用加载错误处理
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:8081',
container: '#vue-app-container',
activeRule: '/vue-app',
loader: (loading) => {
console.log('Vue应用加载状态:', loading);
}
}
], {
beforeLoad: [
app => {
console.log(`${app.name} 开始加载...`);
return Promise.resolve();
}
],
afterMount: [
app => {
console.log(`${app.name} 挂载完成`);
}
],
afterUnmount: [
app => {
console.log(`${app.name} 卸载完成`);
}
]
});
// 监听应用状态变化
window.addEventListener('qiankun:error', (event) => {
const { app, error } = event.detail;
console.error(`应用 ${app.name} 加载失败:`, error);
// 显示错误信息
showAppLoadError(app.name, error);
// 尝试重新加载
setTimeout(() => {
reloadApp(app.name);
}, 5000);
});
b.重试机制
// 应用重试加载机制
class AppLoadManager {
constructor() {
this.retryCount = new Map();
this.maxRetries = 3;
this.retryDelay = 2000;
}
async loadAppWithRetry(appName, appConfig) {
const currentRetries = this.retryCount.get(appName) || 0;
try {
await this.loadApp(appName, appConfig);
this.retryCount.delete(appName); // 成功后清除重试计数
} catch (error) {
console.error(`应用 ${appName} 加载失败:`, error);
if (currentRetries < this.maxRetries) {
this.retryCount.set(appName, currentRetries + 1);
// 延迟重试
setTimeout(() => {
this.loadAppWithRetry(appName, appConfig);
}, this.retryDelay * Math.pow(2, currentRetries));
} else {
// 超过最大重试次数
this.handleLoadFailure(appName, error);
}
}
}
handleLoadFailure(appName, error) {
console.error(`应用 ${appName} 加载失败，已达到最大重试次数`);
// 显示错误页面
showErrorPage(appName, error);
// 通知管理员
notifyAdmin(`应用 ${appName} 加载失败`, error);
}
}
const appLoadManager = new AppLoadManager();
03.运行时错误恢复
a.错误恢复策略
// 错误恢复机制
class ErrorRecovery {
constructor() {
this.errorHistory = [];
this.recoveryStrategies = new Map();
}
recordError(error) {
this.errorHistory.push({
timestamp: Date.now(),
error: error.message,
stack: error.stack
});
// 限制历史记录长度
if (this.errorHistory.length > 100) {
this.errorHistory.shift();
}
}
async recover(appName, error) {
this.recordError(error);
// 根据错误类型选择恢复策略
const strategy = this.getRecoveryStrategy(error);
await this.executeRecoveryStrategy(appName, strategy);
}
getRecoveryStrategy(error) {
if (error.message.includes('Network')) {
return 'network-error';
}
if (error.message.includes('Memory')) {
return 'memory-error';
}
return 'general-error';
}
async executeRecoveryStrategy(appName, strategy) {
switch (strategy) {
case 'network-error':
await this.handleNetworkError(appName);
break;
case 'memory-error':
await this.handleMemoryError(appName);
break;
default:
await this.handleGeneralError(appName);
}
}
async handleNetworkError(appName) {
console.log('处理网络错误，尝试重新连接...');
// 清理缓存
clearAppCache(appName);
// 延迟重试
await new Promise(resolve => setTimeout(resolve, 3000));
// 重新加载应用
await reloadApp(appName);
}
async handleMemoryError(appName) {
console.log('处理内存错误，清理资源...');
// 清理应用缓存
cleanupAppMemory(appName);
// 强制垃圾回收（如果可用）
if (window.gc) {
window.gc();
}
// 重新初始化应用
await reinitializeApp(appName);
}
}
const errorRecovery = new ErrorRecovery();
// 在子应用中使用错误恢复
export async function mount(props) {
try {
await renderApp(props);
} catch (error) {
await errorRecovery.recover('vue-app', error);
}
}
6 部署运维
6.1 独立部署
01.部署架构设计
a.独立域部署
主应用：https://main.example.com
Vue子应用：https://vue-app.example.com
React子应用：https://react-app.example.com
优点：完全独立的部署流程，相互不影响
缺点：需要处理跨域问题，域名配置复杂
b.子路径部署
主应用：https://example.com
Vue子应用：https://example.com/vue-app
React子应用：https://example.com/react-app
优点：统一域名，避免跨域问题
缺点：需要协调部署时间，路径配置复杂
c.CDN部署
主应用：自建服务器
子应用：CDN节点部署
优点：提升访问速度，降低服务器压力
缺点：需要CDN配置支持，缓存更新复杂
02.独立部署配置
a.主应用配置
# 主应用nginx配置
server {
listen 80;
server_name main.example.com;
location / {
root /var/www/main-app;
try_files $uri $uri/ /index.html;
}
# API代理
location /api/ {
proxy_pass http://backend-api:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
b.子应用配置
# Vue子应用nginx配置
server {
listen 80;
server_name vue-app.example.com;
location / {
root /var/www/vue-app;
try_files $uri $uri/ /index.html;
# CORS配置
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
}
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
c.构建配置
# 主应用构建配置
# vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
outputDir: 'dist',
assetsDir: 'static',
productionSourceMap: false,
configureWebpack: {
output: {
filename: 'js/[name].[contenthash:8].js',
chunkFilename: 'js/[name].[contenthash:8].chunk.js'
}
}
};
# 子应用构建配置
# vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/vue-app/' : '/',
outputDir: 'dist',
assetsDir: 'static',
configureWebpack: {
output: {
library: 'vueApp',
libraryTarget: 'umd',
libraryExport: 'default'
}
}
};
03.部署流程
a.主应用部署
# 构建主应用
npm run build
# 部署到服务器
rsync -avz dist/ user@server:/var/www/main-app/
# 重启nginx
sudo systemctl reload nginx
b.子应用部署
# 构建子应用
npm run build
# 部署到服务器
rsync -avz dist/ user@server:/var/www/vue-app/
# 更新子应用版本信息
curl -X POST https://api.example.com/apps/vue-app/version \
-H "Content-Type: application/json" \
-d '{"version": "1.2.3", "timestamp": "'$(date -Iseconds)'"}'
c.健康检查
# 主应用健康检查
curl -f https://main.example.com/health || exit 1
# 子应用健康检查
curl -f https://vue-app.example.com/health || exit 1
6.2 容器化部署
01.Docker配置
a.主应用Dockerfile
# 主应用Dockerfile
FROM node:16-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
b.子应用Dockerfile
# 子应用Dockerfile
FROM node:16-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
c.docker-compose配置
# docker-compose.yml
version: '3.8'
services:
main-app:
build: ./main-app
ports:
- "80:80"
environment:
- NODE_ENV=production
networks:
- microfrontend
vue-app:
build: ./vue-app
ports:
- "8081:80"
environment:
- NODE_ENV=production
networks:
- microfrontend
react-app:
build: ./react-app
ports:
- "8082:80"
environment:
- NODE_ENV=production
networks:
- microfrontend
nginx-proxy:
image: nginx:alpine
ports:
- "443:443"
volumes:
- ./nginx-proxy.conf:/etc/nginx/nginx.conf
- ./ssl:/etc/nginx/ssl
depends_on:
- main-app
- vue-app
- react-app
networks:
- microfrontend
networks:
microfrontend:
driver: bridge
02.Kubernetes部署
a.主应用K8s配置
# main-app-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: main-app
labels:
app: main-app
spec:
replicas: 3
selector:
matchLabels:
app: main-app
template:
metadata:
labels:
app: main-app
spec:
containers:
- name: main-app
image: main-app:latest
ports:
- containerPort: 80
env:
- name: NODE_ENV
value: "production"
resources:
requests:
memory: "256Mi"
cpu: "250m"
limits:
memory: "512Mi"
cpu: "500m"
# main-app-service.yaml
apiVersion: v1
kind: Service
metadata:
name: main-app-service
spec:
selector:
app: main-app
ports:
- protocol: TCP
port: 80
targetPort: 80
type: ClusterIP
b.子应用K8s配置
# vue-app-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
name: vue-app
labels:
app: vue-app
spec:
replicas: 2
selector:
matchLabels:
app: vue-app
template:
metadata:
labels:
app: vue-app
spec:
containers:
- name: vue-app
image: vue-app:latest
ports:
- containerPort: 80
env:
- name: NODE_ENV
value: "production"
resources:
requests:
memory: "128Mi"
cpu: "100m"
limits:
memory: "256Mi"
cpu: "200m"
c.Ingress配置
# ingress.yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: microfrontend-ingress
annotations:
nginx.ingress.kubernetes.io/rewrite-target: /
spec:
rules:
- host: main.example.com
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: main-app-service
port:
number: 80
- host: vue-app.example.com
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: vue-app-service
port:
number: 80
03.CI/CD集成
a.GitHub Actions配置
# .github/workflows/deploy.yml
name: Deploy to Production
on:
push:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '16'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
- name: Build application
run: npm run build
- name: Build Docker image
run: |
docker build -t my-registry/app:${{ github.sha }} .
docker tag my-registry/app:${{ github.sha }} my-registry/app:latest
- name: Push to registry
run: |
docker push my-registry/app:${{ github.sha }}
docker push my-registry/app:latest
- name: Deploy to Kubernetes
run: |
kubectl set image deployment/app app=my-registry/app:${{ github.sha }}
kubectl rollout status deployment/app
b.Jenkins Pipeline配置
# Jenkinsfile
pipeline {
agent any
stages {
stage('Checkout') {
steps {
git branch: 'main', url: 'https://github.com/username/repo.git'
}
}
stage('Install Dependencies') {
steps {
sh 'npm ci'
}
}
stage('Test') {
steps {
sh 'npm test'
}
}
stage('Build') {
steps {
sh 'npm run build'
}
}
stage('Build Image') {
steps {
script {
def image = docker.build("my-registry/app:${env.BUILD_NUMBER}")
image.push()
image.push('latest')
}
}
}
stage('Deploy') {
steps {
sh 'kubectl set image deployment/app app=my-registry/app:${env.BUILD_NUMBER}'
sh 'kubectl rollout status deployment/app'
}
}
}
}
6.3 Nginx配置
01.主应用Nginx配置
a.基础配置
# /etc/nginx/sites-available/main-app
server {
listen 80;
server_name main.example.com;
# 主应用静态文件
location / {
root /var/www/main-app;
index index.html;
try_files $uri $uri/ /index.html;
# 安全头
add_header X-Frame-Options "SAMEORIGIN";
add_header X-Content-Type-Options "nosniff";
add_header X-XSS-Protection "1; mode=block";
}
# API代理
location /api/ {
proxy_pass http://backend-api:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# 健康检查
location /health {
access_log off;
return 200 "healthy\n";
add_header Content-Type text/plain;
}
}
b.负载均衡配置
upstream main_app_backend {
least_conn;
server main-app-1:80 weight=1 max_fails=3 fail_timeout=30s;
server main-app-2:80 weight=1 max_fails=3 fail_timeout=30s;
server main-app-3:80 weight=1 max_fails=3 fail_timeout=30s;
}
server {
listen 80;
server_name main.example.com;
location / {
proxy_pass http://main_app_backend;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 30s;
proxy_send_timeout 30s;
proxy_read_timeout 30s;
}
}
02.子应用Nginx配置
a.独立部署配置
# Vue子应用配置
server {
listen 80;
server_name vue-app.example.com;
location / {
root /var/www/vue-app;
index index.html;
try_files $uri $uri/ /index.html;
# CORS头
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization";
if ($request_method = 'OPTIONS') {
return 204;
}
}
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Access-Control-Allow-Origin *;
}
}
b.反向代理配置
# 统一入口代理配置
server {
listen 80;
server_name app.example.com;
# 主应用
location / {
proxy_pass http://main-app:80/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# Vue子应用
location /vue-app/ {
proxy_pass http://vue-app:80/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
rewrite ^/vue-app/(.*)$ /$1 break;
}
# React子应用
location /react-app/ {
proxy_pass http://react-app:80/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
rewrite ^/react-app/(.*)$ /$1 break;
}
}
03.HTTPS配置
a.SSL证书配置
server {
listen 443 ssl http2;
server_name main.example.com;
ssl_certificate /etc/nginx/ssl/main-app.crt;
ssl_certificate_key /etc/nginx/ssl/main-app.key;
# SSL配置
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
ssl_prefer_server_ciphers off;
ssl_session_cache shared:SSL:10m;
location / {
root /var/www/main-app;
try_files $uri $uri/ /index.html;
}
}
# HTTP重定向到HTTPS
server {
listen 80;
server_name main.example.com;
return 301 https://$server_name$request_uri;
}
b.HSTS配置
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
6.4 性能监控
01.应用性能监控
a.性能指标收集
// 性能监控工具类
class PerformanceMonitor {
constructor() {
this.metrics = {
navigation: {},
resources: [],
userTiming: [],
vitals: {}
};
this.init();
}
init() {
// 监听页面加载性能
this.observeNavigation();
// 监听资源加载性能
this.observeResources();
// 监听核心Web指标
this.observeWebVitals();
// 监听自定义指标
this.observeCustomMetrics();
}
observeNavigation() {
if ('performance' in window && 'getEntriesByType' in performance) {
const navigation = performance.getEntriesByType('navigation')[0];
this.metrics.navigation = {
dns: navigation.domainLookupEnd - navigation.domainLookupStart,
tcp: navigation.connectEnd - navigation.connectStart,
ssl: navigation.secureConnectionStart > 0 ?
navigation.connectEnd - navigation.secureConnectionStart : 0,
ttfb: navigation.responseStart - navigation.requestStart,
download: navigation.responseEnd - navigation.responseStart,
domParse: navigation.domContentLoadedEventStart - navigation.responseEnd,
ready: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
load: navigation.loadEventEnd - navigation.loadEventStart
};
}
}
observeResources() {
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.entryType === 'resource') {
this.metrics.resources.push({
name: entry.name,
type: this.getResourceType(entry.name),
duration: entry.duration,
size: entry.transferSize || 0,
cached: entry.transferSize === 0 && entry.decodedBodySize > 0
});
}
});
});
observer.observe({ entryTypes: ['resource'] });
}
}
observeWebVitals() {
// LCP (Largest Contentful Paint)
this.observeLCP();
// FID (First Input Delay)
this.observeFID();
// CLS (Cumulative Layout Shift)
this.observeCLS();
}
observeLCP() {
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];
this.metrics.vitals.lcp = lastEntry.startTime;
this.reportMetrics();
});
observer.observe({ entryTypes: ['largest-contentful-paint'] });
}
}
observeFID() {
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
this.metrics.vitals.fid = entry.processingStart - entry.startTime;
this.reportMetrics();
});
});
observer.observe({ entryTypes: ['first-input'] });
}
}
observeCLS() {
if ('PerformanceObserver' in window) {
let clsValue = 0;
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (!entry.hadRecentInput) {
clsValue += entry.value;
}
});
this.metrics.vitals.cls = clsValue;
});
observer.observe({ entryTypes: ['layout-shift'] });
}
}
reportMetrics() {
// 发送性能指标到监控平台
fetch('/api/metrics/performance', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
appName: window.__POWERED_BY_QIANKUN__ ? 'sub-app' : 'main-app',
url: window.location.href,
userAgent: navigator.userAgent,
timestamp: Date.now(),
metrics: this.metrics
})
}).catch(error => {
console.error('性能指标上报失败:', error);
});
}
getResourceType(url) {
if (url.match(/\.(js)$/)) return 'script';
if (url.match(/\.(css)$/)) return 'stylesheet';
if (url.match(/\.(png|jpg|jpeg|gif|svg)$/)) return 'image';
if (url.match(/\.(woff|woff2|ttf|eot)$/)) return 'font';
return 'other';
}
}
// 在应用启动时初始化性能监控
const performanceMonitor = new PerformanceMonitor();
b.微前端专用监控
// 微前端性能监控
class MicroFrontendMonitor {
constructor() {
this.appMetrics = new Map();
this.loadTimes = new Map();
this.init();
}
init() {
// 监听应用加载事件
this.observeAppLoading();
// 监听应用切换
this.observeAppSwitching();
// 监听应用卸载
this.observeAppUnloading();
}
observeAppLoading() {
window.addEventListener('qiankun:start', (event) => {
const appName = event.detail.name;
this.loadTimes.set(appName, Date.now());
});
window.addEventListener('qiankun:app-mounted', (event) => {
const appName = event.detail.name;
const loadTime = this.loadTimes.get(appName);
if (loadTime) {
const mountTime = Date.now() - loadTime;
this.recordAppMetric(appName, 'mountTime', mountTime);
}
});
}
observeAppSwitching() {
let currentApp = null;
let switchTime = null;
window.addEventListener('hashchange', () => {
const newApp = this.getCurrentApp();
if (currentApp && newApp !== currentApp && switchTime) {
const switchDuration = Date.now() - switchTime;
this.recordAppMetric(currentApp, 'switchTime', switchDuration);
}
currentApp = newApp;
switchTime = Date.now();
});
}
recordAppMetric(appName, metric, value) {
if (!this.appMetrics.has(appName)) {
this.appMetrics.set(appName, {});
}
const appData = this.appMetrics.get(appName);
appData[metric] = appData[metric] || [];
appData[metric].push({
value,
timestamp: Date.now()
});
// 上报到监控平台
this.reportAppMetrics(appName, metric, value);
}
reportAppMetrics(appName, metric, value) {
fetch('/api/metrics/micro-frontend', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
appName,
metric,
value,
timestamp: Date.now(),
url: window.location.href
})
});
}
}
const microFrontendMonitor = new MicroFrontendMonitor();
02.用户体验监控
a.错误监控
// 错误监控工具
class ErrorMonitor {
constructor() {
this.errorCount = 0;
this.maxErrors = 50; // 防止错误风暴
this.init();
}
init() {
// 监听JavaScript错误
window.addEventListener('error', this.handleError.bind(this));
// 监听Promise错误
window.addEventListener('unhandledrejection', this.handlePromiseError.bind(this));
// 监听资源加载错误
window.addEventListener('error', this.handleResourceError.bind(this), true);
}
handleError(event) {
if (this.errorCount >= this.maxErrors) return;
const error = {
type: 'javascript',
message: event.message,
filename: event.filename,
lineno: event.lineno,
colno: event.colno,
stack: event.error?.stack,
timestamp: Date.now(),
url: window.location.href,
userAgent: navigator.userAgent
};
this.reportError(error);
this.errorCount++;
}
handlePromiseError(event) {
if (this.errorCount >= this.maxErrors) return;
const error = {
type: 'promise',
message: event.reason?.message || String(event.reason),
stack: event.reason?.stack,
timestamp: Date.now(),
url: window.location.href,
userAgent: navigator.userAgent
};
this.reportError(error);
this.errorCount++;
}
handleResourceError(event) {
if (this.errorCount >= this.maxErrors) return;
const target = event.target;
const error = {
type: 'resource',
resourceType: this.getResourceType(target),
url: target.src || target.href,
timestamp: Date.now(),
url: window.location.href,
userAgent: navigator.userAgent
};
this.reportError(error);
this.errorCount++;
}
reportError(error) {
fetch('/api/errors', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
appName: window.__POWERED_BY_QIANKUN__ ? 'sub-app' : 'main-app',
...error
})
}).catch(reportError => {
console.error('错误上报失败:', reportError);
});
}
getResourceType(target) {
if (target.tagName === 'SCRIPT') return 'script';
if (target.tagName === 'LINK') return 'stylesheet';
if (target.tagName === 'IMG') return 'image';
return 'unknown';
}
}
const errorMonitor = new ErrorMonitor();
6.5 日志管理
01.日志收集系统
a.前端日志收集
// 日志管理器
class LogManager {
constructor(options = {}) {
this.level = options.level || 'info';
this.maxLogs = options.maxLogs || 1000;
this.logs = [];
this.init();
}
init() {
// 监控应用启动
this.log('info', '应用启动', {
url: window.location.href,
userAgent: navigator.userAgent,
timestamp: Date.now()
});
// 监听页面卸载
window.addEventListener('beforeunload', () => {
this.log('info', '页面卸载', {
stayTime: Date.now() - this.startTime
});
this.flushLogs();
});
this.startTime = Date.now();
}
log(level, message, data = {}) {
if (!this.shouldLog(level)) return;
const logEntry = {
id: this.generateId(),
level,
message,
data,
timestamp: Date.now(),
url: window.location.href,
appName: this.getCurrentAppName()
};
this.logs.push(logEntry);
// 限制日志数量
if (this.logs.length > this.maxLogs) {
this.logs.shift();
}
// 开发环境输出到控制台
if (process.env.NODE_ENV === 'development') {
console[level](message, data);
}
// 严重错误立即上报
if (level === 'error') {
this.reportLog(logEntry);
}
}
info(message, data) {
this.log('info', message, data);
}
warn(message, data) {
this.log('warn', message, data);
}
error(message, data) {
this.log('error', message, data);
}
debug(message, data) {
this.log('debug', message, data);
}
shouldLog(level) {
const levels = ['debug', 'info', 'warn', 'error'];
const currentLevelIndex = levels.indexOf(this.level);
const messageLevelIndex = levels.indexOf(level);
return messageLevelIndex >= currentLevelIndex;
}
generateId() {
return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}
getCurrentAppName() {
if (window.__POWERED_BY_QIANKUN__) {
return window.__QIANKUN_DEVELOPMENT__.appName || 'unknown-sub-app';
}
return 'main-app';
}
flushLogs() {
if (this.logs.length === 0) return;
const logsToSend = [...this.logs];
this.logs = [];
this.reportLogs(logsToSend);
}
reportLog(logEntry) {
this.reportLogs([logEntry]);
}
reportLogs(logEntries) {
fetch('/api/logs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
logs: logEntries,
metadata: {
userAgent: navigator.userAgent,
url: window.location.href,
timestamp: Date.now()
}
})
}).catch(error => {
console.error('日志上报失败:', error);
// 失败的日志重新加入队列
this.logs.unshift(...logEntries);
});
}
}
const logManager = new LogManager({
level: process.env.NODE_ENV === 'production' ? 'info' : 'debug',
maxLogs: 1000
});
// 全局日志API
window.logger = logManager;
02.日志聚合分析
a.日志格式标准化
// 日志格式标准
const LOG_FORMAT = {
version: '1.0',
timestamp: 'ISO 8601',
level: 'debug|info|warn|error',
app: '应用名称',
message: '日志消息',
data: {
// 具体数据
},
context: {
url: '页面URL',
userAgent: '用户代理',
userId: '用户ID',
sessionId: '会话ID'
}
};
// 日志转换器
class LogTransformer {
static transform(rawLog) {
return {
version: LOG_FORMAT.version,
timestamp: new Date(rawLog.timestamp).toISOString(),
level: rawLog.level,
app: rawLog.appName,
message: rawLog.message,
data: rawLog.data,
context: {
url: rawLog.url,
userAgent: navigator.userAgent,
userId: this.getUserId(),
sessionId: this.getSessionId()
}
};
}
static getUserId() {
return window.userId || 'anonymous';
}
static getSessionId() {
if (!window.sessionId) {
window.sessionId = this.generateSessionId();
}
return window.sessionId;
}
static generateSessionId() {
return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
}
}
b.日志聚合接口
// 后端日志聚合API
app.post('/api/logs', async (req, res) => {
try {
const { logs, metadata } = req.body;
// 转换日志格式
const transformedLogs = logs.map(log => LogTransformer.transform(log));
// 批量写入日志
await logService.insertLogs(transformedLogs);
// 更新实时统计
await updateLogStatistics(transformedLogs);
res.json({ success: true, received: logs.length });
} catch (error) {
console.error('日志处理失败:', error);
res.status(500).json({ error: '日志处理失败' });
}
});
// 日志统计分析
async function updateLogStatistics(logs) {
const stats = {
total: logs.length,
byLevel: {},
byApp: {},
timeRange: {
start: Math.min(...logs.map(log => new Date(log.timestamp).getTime())),
end: Math.max(...logs.map(log => new Date(log.timestamp).getTime()))
}
};
logs.forEach(log => {
stats.byLevel[log.level] = (stats.byLevel[log.level] || 0) + 1;
stats.byApp[log.app] = (stats.byApp[log.app] || 0) + 1;
});
// 更新缓存
await cache.set('log-stats', stats, 300); // 5分钟缓存
}
6.6 故障排查
01.常见问题诊断
a.应用加载失败诊断工具
// 应用诊断工具
class AppDiagnosticTool {
constructor() {
this.issues = [];
this.checks = [
this.checkNetworkConnectivity,
this.checkResourceAvailability,
this.checkCORSConfiguration,
this.checkJavaScriptErrors,
this.checkConsoleErrors,
this.checkPerformanceMetrics
];
}
async runDiagnostics() {
console.log('开始微前端诊断...');
for (const check of this.checks) {
try {
await check.call(this);
} catch (error) {
console.error('诊断检查失败:', error);
this.addIssue('system', '诊断检查失败', error.message);
}
}
this.generateReport();
}
checkNetworkConnectivity() {
return new Promise((resolve) => {
if (!navigator.onLine) {
this.addIssue('network', '网络连接', '设备处于离线状态');
}
fetch('/api/health')
.then(response => {
if (!response.ok) {
this.addIssue('network', 'API连接', `API服务器响应异常: ${response.status}`);
}
})
.catch(error => {
this.addIssue('network', 'API连接', `无法连接到API服务器: ${error.message}`);
})
.finally(resolve);
});
}
checkResourceAvailability() {
// 检查关键资源
const criticalResources = [
'/static/js/main.js',
'/static/css/main.css'
];
criticalResources.forEach(resource => {
fetch(resource)
.then(response => {
if (!response.ok) {
this.addIssue('resource', '资源加载', `关键资源缺失: ${resource}`);
}
})
.catch(error => {
this.addIssue('resource', '资源加载', `资源加载失败: ${resource}`);
});
});
}
checkCORSConfiguration() {
const testUrl = window.location.origin + '/api/test-cors';
fetch(testUrl, {
method: 'OPTIONS'
})
.then(response => {
const corsHeaders = {
'Access-Control-Allow-Origin': response.headers.get('Access-Control-Allow-Origin'),
'Access-Control-Allow-Methods': response.headers.get('Access-Control-Allow-Methods'),
'Access-Control-Allow-Headers': response.headers.get('Access-Control-Allow-Headers')
};
if (!corsHeaders['Access-Control-Allow-Origin']) {
this.addIssue('cors', 'CORS配置', '缺少Access-Control-Allow-Origin头');
}
})
.catch(error => {
this.addIssue('cors', 'CORS配置', `CORS检查失败: ${error.message}`);
});
}
checkJavaScriptErrors() {
// 检查最近的JavaScript错误
const errorLogs = this.getRecentErrors();
if (errorLogs.length > 0) {
errorLogs.forEach(error => {
this.addIssue('javascript', 'JavaScript错误', error.message);
});
}
}
checkConsoleErrors() {
// 检查控制台错误
const originalError = console.error;
let errorCount = 0;
console.error = function(...args) {
errorCount++;
return originalError.apply(console, args);
};
setTimeout(() => {
console.error = originalError;
if (errorCount > 0) {
this.addIssue('console', '控制台错误', `检测到 ${errorCount} 个控制台错误`);
}
}, 1000);
}
checkPerformanceMetrics() {
if ('performance' in window) {
const navigation = performance.getEntriesByType('navigation')[0];
const loadTime = navigation.loadEventEnd - navigation.navigationStart;
if (loadTime > 5000) { // 5秒
this.addIssue('performance', '性能', `页面加载时间过长: ${loadTime}ms`);
}
}
}
getRecentErrors() {
// 从错误日志中获取最近的错误
return window.logger?.logs?.filter(log =>
log.level === 'error' &&
Date.now() - log.timestamp < 300000 // 5分钟内
) || [];
}
addIssue(type, category, description) {
this.issues.push({
type,
category,
description,
timestamp: Date.now()
});
}
generateReport() {
console.group('微前端诊断报告');
console.log('诊断时间:', new Date().toLocaleString());
console.log('发现的问题数量:', this.issues.length);
if (this.issues.length === 0) {
console.log('✅ 未发现明显问题');
} else {
this.issues.forEach((issue, index) => {
console.group(`问题 ${index + 1}: ${issue.category}`);
console.log('类型:', issue.type);
console.log('描述:', issue.description);
console.log('时间:', new Date(issue.timestamp).toLocaleString());
console.groupEnd();
});
// 提供解决建议
this.generateSuggestions();
}
console.groupEnd();
}
generateSuggestions() {
console.group('解决建议');
this.issues.forEach(issue => {
const suggestion = this.getSuggestion(issue);
if (suggestion) {
console.log(`${issue.category}: ${suggestion}`);
}
});
console.groupEnd();
}
getSuggestion(issue) {
const suggestions = {
'网络连接': '检查网络连接，确保设备已连接到互联网',
'API连接': '检查API服务器状态，确认后端服务正常运行',
'资源加载': '检查静态资源配置，确保文件路径正确且文件存在',
'CORS配置': '检查服务器CORS配置，确保允许跨域访问',
'JavaScript错误': '检查代码逻辑，修复语法错误和运行时异常',
'控制台错误': '查看控制台详细信息，定位并修复错误',
'性能': '优化资源加载，减少文件大小，启用缓存'
};
return suggestions[issue.category];
}
}
// 全局诊断工具
window.diagnoseApp = () => {
const diagnosticTool = new AppDiagnosticTool();
diagnosticTool.runDiagnostics();
};
02.实时健康检查
a.健康检查机制
// 应用健康检查
class HealthChecker {
constructor(options = {}) {
this.checkInterval = options.checkInterval || 30000; // 30秒
this.timeout = options.timeout || 5000; // 5秒超时
this.endpoints = options.endpoints || [
'/api/health',
'/health'
];
this.isHealthy = true;
this.callbacks = [];
this.start();
}
start() {
this.checkHealth();
this.interval = setInterval(() => {
this.checkHealth();
}, this.checkInterval);
}
stop() {
if (this.interval) {
clearInterval(this.interval);
}
}
async checkHealth() {
const results = await Promise.allSettled(
this.endpoints.map(endpoint => this.checkEndpoint(endpoint))
);
const failedChecks = results.filter(result =>
result.status === 'rejected' || !result.value
);
const wasHealthy = this.isHealthy;
this.isHealthy = failedChecks.length === 0;
if (wasHealthy !== this.isHealthy) {
this.notifyHealthChange(this.isHealthy);
}
if (!this.isHealthy) {
this.handleUnhealthy(failedChecks);
}
}
async checkEndpoint(endpoint) {
try {
const response = await fetch(endpoint, {
method: 'GET',
timeout: this.timeout
});
return response.ok;
} catch (error) {
return false;
}
}
onHealthChange(callback) {
this.callbacks.push(callback);
}
notifyHealthChange(isHealthy) {
this.callbacks.forEach(callback => {
try {
callback(isHealthy);
} catch (error) {
console.error('健康状态回调执行失败:', error);
}
});
}
handleUnhealthy(failedChecks) {
console.warn('应用健康检查失败:', failedChecks);
// 发送告警
this.sendAlert(failedChecks);
// 尝试恢复
this.attemptRecovery();
}
sendAlert(failedChecks) {
fetch('/api/alerts/health', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
type: 'health-check-failed',
message: '应用健康检查失败',
details: failedChecks,
timestamp: Date.now(),
url: window.location.href
})
}).catch(error => {
console.error('告警发送失败:', error);
});
}
attemptRecovery() {
// 清理缓存
if ('caches' in window) {
caches.keys().then(cacheNames => {
cacheNames.forEach(cacheName => {
caches.delete(cacheName);
});
});
}
// 重新加载应用
setTimeout(() => {
if (confirm('应用出现异常，是否重新加载？')) {
window.location.reload();
}
}, 5000);
}
}
// 初始化健康检查
const healthChecker = new HealthChecker({
checkInterval: 30000,
endpoints: ['/api/health', '/health']
});
// 监听健康状态变化
healthChecker.onHealthChange((isHealthy) => {
if (!isHealthy) {
console.warn('应用健康状态异常');
// 显示健康状态警告
showHealthWarning();
} else {
console.log('应用健康状态正常');
hideHealthWarning();
}
});
7 最佳实践
7.1 项目组织结构
01.推荐的项目结构
a.整体目录结构
micro-frontend-project/
├── packages/
│ ├── main-app/ # 主应用
│ │ ├── src/
│ │ │ ├── components/ # 公共组件
│ │ │ ├── layouts/ # 布局组件
│ │ │ ├── micro/ # 微前端配置
│ │ │ ├── utils/ # 工具函数
│ │ │ ├── store/ # 状态管理
│ │ │ └── router/ # 路由配置
│ │ ├── public/
│ │ ├── package.json
│ │ └── vite.config.js
│ ├── shared-components/ # 共享组件库
│ ├── shared-utils/ # 共享工具库
│ ├── micro-apps/ # 子应用目录
│ │ ├── vue-app/ # Vue子应用
│ │ ├── react-app/ # React子应用
│ │ └── angular-app/ # Angular子应用
│ └── docs/ # 项目文档
├── tools/ # 构建工具
├── scripts/ # 脚本文件
├── docker/ # Docker配置
├── nginx/ # Nginx配置
└── package.json # 根package.json
b.主应用详细结构
main-app/
├── src/
│ ├── main.js # 应用入口
│ ├── App.vue # 根组件
│ ├── components/
│ │ ├── Header/ # 头部组件
│ │ ├── Sidebar/ # 侧边栏组件
│ │ ├── Footer/ # 底部组件
│ │ └── MicroContainer/ # 微应用容器
│ ├── layouts/
│ │ ├── BasicLayout.vue # 基础布局
│ │ └── EmptyLayout.vue # 空白布局
│ ├── micro/
│ │ ├── apps.js # 子应用配置
│ │ ├── global-state.js # 全局状态
│ │ └── event-bus.js # 事件总线
│ ├── utils/
│ │ ├── auth.js # 认证工具
│ │ ├── request.js # 请求工具
│ │ └── storage.js # 存储工具
│ ├── store/
│ │ ├── index.js # store入口
│ │ ├── modules/
│ │ │ ├── user.js # 用户状态
│ │ │ └── app.js # 应用状态
│ └── router/
│ ├── index.js # 路由入口
│ └── routes/ # 路由配置
├── public/
│ ├── index.html
│ └── favicon.ico
├── package.json
└── vite.config.js
c.子应用详细结构
vue-app/
├── src/
│ ├── main.js # 应用入口
│ ├── App.vue # 根组件
│ ├── components/
│ ├── views/
│ ├── router/
│ ├── store/
│ ├── utils/
│ └── api/
├── public/
├── package.json
└── vite.config.js
02.模块化设计
a.共享模块设计
# shared-components/package.json
{
"name": "@micro-app/shared-components",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"peerDependencies": {
"vue": "^3.0.0"
}
}
# shared-components/src/index.js
import Button from './Button.vue';
import Modal from './Modal.vue';
import Table from './Table.vue';
export {
Button,
Modal,
Table
};
export default {
Button,
Modal,
Table
};
b.工具模块设计
# shared-utils/package.json
{
"name": "@micro-app/shared-utils",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts"
}
# shared-utils/src/index.js
import { formatDate, formatCurrency } from './format';
import { deepClone, debounce, throttle } from './helpers';
import { request, get, post, put, delete } from './http';
import { getToken, setToken, removeToken } from './auth';
export {
formatDate,
formatCurrency,
deepClone,
debounce,
throttle,
request,
get,
post,
put,
delete,
getToken,
setToken,
removeToken
};
c.配置管理
# 主应用配置
// main-app/src/config/index.js
export const config = {
appName: 'main-app',
apiBaseUrl: process.env.VUE_APP_API_BASE_URL,
microApps: [
{
name: 'vue-app',
entry: process.env.VUE_APP_VUE_APP_ENTRY,
activeRule: '/vue-app'
},
{
name: 'react-app',
entry: process.env.VUE_APP_REACT_APP_ENTRY,
activeRule: '/react-app'
}
],
globalConfig: {
theme: 'light',
language: 'zh-CN'
}
};
03.环境配置
a.开发环境配置
# .env.development
VUE_APP_API_BASE_URL=http://localhost:3000/api
VUE_APP_VUE_APP_ENTRY=//localhost:8081
VUE_APP_REACT_APP_ENTRY=//localhost:8082
VUE_APP_ENV=development
b.测试环境配置
# .env.staging
VUE_APP_API_BASE_URL=https://staging-api.example.com/api
VUE_APP_VUE_APP_ENTRY=//vue-app-staging.example.com
VUE_APP_REACT_APP_ENTRY=//react-app-staging.example.com
VUE_APP_ENV=staging
c.生产环境配置
# .env.production
VUE_APP_API_BASE_URL=https://api.example.com/api
VUE_APP_VUE_APP_ENTRY=//vue-app.example.com
VUE_APP_REACT_APP_ENTRY=//react-app.example.com
VUE_APP_ENV=production
7.2 开发规范约定
01.代码规范
a.ESLint配置
# .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
browser: true,
es2021: true
},
extends: [
'eslint:recommended',
'@vue/eslint-config-prettier'
],
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-unused-vars': 'warn',
'no-undef': 'error',
'semi': ['error', 'never'],
'quotes': ['error', 'single'],
'indent': ['error', 2],
'vue/multi-word-component-names': 'off'
}
}
b.Prettier配置
# .prettierrc
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "lf"
}
c.命名规范
# 组件命名：PascalCase
UserProfile.vue
UserManagement.vue
# 文件命名：kebab-case
user-profile.js
user-management.js
# 变量命名：camelCase
const userInfo = {}
const isUserLoggedIn = false
# 常量命名：UPPER_SNAKE_CASE
const API_BASE_URL = 'https://api.example.com'
const MAX_RETRY_COUNT = 3
02.Git工作流
a.分支策略
main # 主分支，生产环境代码
├── develop # 开发分支，集成最新功能
├── feature/* # 功能分支
├── hotfix/* # 热修复分支
└── release/* # 发布分支
b.提交规范
# .gitmessage
# <type>(<scope>): <subject>
#
# <body>
#
# <footer>
# Type类型
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式化
refactor: 重构
test: 测试相关
chore: 构建过程或辅助工具的变动
# 示例
feat(user): 添加用户管理功能
fix(api): 修复用户登录接口错误
docs(readme): 更新项目说明文档
c.CI/CD集成
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main, develop]
pull_request:
branches: [main, develop]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '16'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run linting
run: npm run lint
- name: Run tests
run: npm run test
- name: Build
run: npm run build
03.组件开发规范
a.组件结构规范
<!-- UserProfile.vue -->
<template>
<div class="user-profile">
<div class="user-profile__header">
<slot name="header">
<h2 class="user-profile__title">{{ title }}</h2>
</slot>
</div>
<div class="user-profile__content">
<slot>
<UserInfo :user="user" />
</slot>
</div>
</div>
</template>
<script>
import { ref, computed, onMounted } from 'vue'
import UserInfo from './UserInfo.vue'
export default {
name: 'UserProfile',
components: {
UserInfo
},
props: {
userId: {
type: String,
required: true
},
title: {
type: String,
default: '用户资料'
}
},
emits: ['user-loaded', 'error'],
setup(props, { emit }) {
const user = ref(null)
const loading = ref(false)
const error = ref(null)
const isLoaded = computed(() => user.value !== null)
const loadUser = async () => {
loading.value = true
error.value = null
try {
const response = await fetch(`/api/users/${props.userId}`)
if (!response.ok) {
throw new Error('Failed to load user')
}
const userData = await response.json()
user.value = userData
emit('user-loaded', userData)
} catch (err) {
error.value = err.message
emit('error', err)
} finally {
loading.value = false
}
}
onMounted(() => {
loadUser()
})
return {
user,
loading,
error,
isLoaded,
loadUser
}
}
}
</script>
<style scoped>
.user-profile {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
background-color: #ffffff;
}
.user-profile__header {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.user-profile__title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333333;
}
.user-profile__content {
min-height: 100px;
}
</style>
b.状态管理规范
# store/modules/user.js
export default {
namespaced: true,
state: () => ({
userInfo: null,
permissions: [],
loading: false,
error: null
}),
getters: {
isLoggedIn: (state) => state.userInfo !== null,
userName: (state) => state.userInfo?.name || '',
hasPermission: (state) => (permission) => {
return state.permissions.includes(permission)
}
},
mutations: {
SET_LOADING(state, loading) {
state.loading = loading
},
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo
},
SET_PERMISSIONS(state, permissions) {
state.permissions = permissions
},
SET_ERROR(state, error) {
state.error = error
},
CLEAR_USER(state) {
state.userInfo = null
state.permissions = []
state.error = null
}
},
actions: {
async login({ commit }, credentials) {
commit('SET_LOADING', true)
commit('SET_ERROR', null)
try {
const response = await api.login(credentials)
const { user, permissions, token } = response.data
commit('SET_USER_INFO', user)
commit('SET_PERMISSIONS', permissions)
// 保存token
localStorage.setItem('token', token)
return { user, permissions }
} catch (error) {
const errorMessage = error.response?.data?.message || '登录失败'
commit('SET_ERROR', errorMessage)
throw error
} finally {
commit('SET_LOADING', false)
}
},
logout({ commit }) {
commit('CLEAR_USER')
localStorage.removeItem('token')
}
}
}
7.3 版本管理策略
01.语义化版本控制
a.版本号格式
MAJOR.MINOR.PATCH
MAJOR: 不兼容的API修改
MINOR: 向下兼容的功能性新增
PATCH: 向下兼容的问题修正
示例：
1.0.0 - 初始版本
1.1.0 - 添加新功能
1.1.1 - 修复bug
2.0.0 - 破坏性更新
b.主应用版本管理
# main-app/package.json
{
"name": "@micro-app/main-app",
"version": "1.2.3",
"description": "微前端主应用",
"main": "dist/main.js",
"files": [
"dist"
],
"dependencies": {
"@micro-app/shared-components": "^1.0.0",
"@micro-app/shared-utils": "^1.0.0",
"qiankun": "^2.9.0"
}
}
c.子应用版本管理
# vue-app/package.json
{
"name": "@micro-app/vue-app",
"version": "1.1.0",
"description": "Vue微应用",
"main": "dist/main.js",
"dependencies": {
"@micro-app/shared-components": "^1.0.0",
"@micro-app/shared-utils": "^1.0.0"
}
}
02.发布策略
a.主应用发布
# 主应用发布流程
1. 更新版本号
2. 更新CHANGELOG.md
3. 构建应用
4. 运行测试
5. 打标签
6. 发布到registry
7. 更新子应用引用
# 发布脚本
# scripts/release-main-app.sh
#!/bin/bash
# 更新版本号
npm version patch -m "chore: bump version to %s"
# 更新CHANGELOG
npm run changelog
# 构建应用
npm run build
# 运行测试
npm test
# 创建git标签
git tag -a v$(npm pkg get version) -m "Release v$(npm pkg get version)"
# 推送标签
git push origin --tags
# 发布到registry
npm publish --access public
echo "主应用发布完成"
b.子应用发布
# 子应用发布流程
1. 更新版本号
2. 构建应用
3. 部署到服务器
4. 更新主应用配置
5. 通知相关团队
# 发布脚本
# scripts/release-sub-app.sh
#!/bin/bash
APP_NAME=$1
if [ -z "$APP_NAME" ]; then
echo "请指定应用名称: ./scripts/release-sub-app.sh vue-app"
exit 1
fi
cd "packages/micro-apps/$APP_NAME"
# 更新版本号
npm version patch
# 构建应用
npm run build
# 部署到服务器
rsync -avz dist/ deploy@server:/var/www/$APP_NAME/
# 更新主应用配置
cd ../../../
npm run update-sub-app-config $APP_NAME
echo "子应用 $APP_NAME 发布完成"
c.依赖管理
# 依赖版本管理策略
# package.json
{
"dependencies": {
# 精确版本，稳定性优先
"qiankun": "2.9.6",
# 波浪号版本，接受补丁更新
"vue": "~3.2.37",
# 插入号版本，接受次要更新
"axios": "^0.27.2",
# 共享依赖，版本锁定
"@micro-app/shared-components": "1.0.0"
},
"devDependencies": {
# 开发依赖，可以使用最新版本
"@vitejs/plugin-vue": "^3.0.0",
"vite": "^3.0.0"
}
}
03.兼容性管理
a.接口版本管理
# API版本控制
/api/v1/users # v1版本API
/api/v2/users # v2版本API
# 版本兼容策略
const API_VERSIONS = {
v1: '1.0.0',
v2: '2.0.0',
latest: '2.0.0'
};
# 降级处理
function getCompatibleVersion(clientVersion) {
if (semver.gte(clientVersion, '2.0.0')) {
return 'v2';
} else {
return 'v1';
}
}
b.组件版本兼容
# 组件版本管理
const COMPONENT_COMPATIBILITY = {
'Button': {
'1.0.0': { compatible: ['1.0.x', '1.1.x'] },
'1.1.0': { compatible: ['1.1.x', '1.2.x'] },
'2.0.0': { compatible: ['2.0.x'], breaking: true }
}
};
# 版本检查
function checkComponentCompatibility(componentName, version) {
const compatibility = COMPONENT_COMPATIBILITY[componentName];
if (!compatibility) {
return { compatible: false, message: 'Unknown component' };
}
const currentVersion = getCurrentComponentVersion(componentName);
const compatibleVersions = compatibility[version]?.compatible;
if (compatibleVersions && compatibleVersions.some(v => semver.satisfies(currentVersion, v))) {
return { compatible: true };
}
return { compatible: false, message: 'Version incompatible' };
}
7.4 性能优化技巧
01.应用加载优化
a.代码分割策略
// 路由级代码分割
const routes = [
{
path: '/dashboard',
component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue')
},
{
path: '/users',
component: () => import(/* webpackChunkName: "users" */ '@/views/Users.vue')
}
];
// 组件级代码分割
export default {
components: {
HeavyComponent: () => import('@/components/HeavyComponent.vue')
}
};
b.预加载策略
// 智能预加载
class PreloadManager {
constructor() {
this.preloadedApps = new Set();
this.userBehavior = new Map();
}
predictNextApp() {
// 基于用户行为预测下一个应用
const behavior = Array.from(this.userBehavior.entries());
const sorted = behavior.sort((a, b) => b - a);
return sorted[0]?.[0];
}
preloadApp(appName) {
if (this.preloadedApps.has(appName)) {
return Promise.resolve();
}
return new Promise((resolve, reject) => {
const link = document.createElement('link');
link.rel = 'preload';
link.href = `/apps/${appName}/manifest.json`;
link.as = 'fetch';
link.crossOrigin = 'anonymous';
link.onload = () => {
this.preloadedApps.add(appName);
resolve();
};
link.onerror = reject;
document.head.appendChild(link);
});
}
recordUserAction(appName) {
const count = this.userBehavior.get(appName) || 0;
this.userBehavior.set(appName, count + 1);
// 预测并预加载下一个应用
const nextApp = this.predictNextApp();
if (nextApp && nextApp !== appName) {
setTimeout(() => {
this.preloadApp(nextApp);
}, 1000);
}
}
}
const preloadManager = new PreloadManager();
// 路由变化时记录用户行为
router.afterEach((to) => {
const appName = getAppNameFromRoute(to.path);
if (appName) {
preloadManager.recordUserAction(appName);
}
});
c.资源优化
// 资源压缩和合并
# vite.config.js
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks(id) {
// 将node_modules中的依赖单独打包
if (id.includes('node_modules')) {
if (id.includes('vue')) {
return 'vue-vendor';
}
if (id.includes('element-plus')) {
return 'ui-vendor';
}
return 'vendor';
}
}
}
},
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
});
02.运行时性能优化
a.虚拟列表优化
// 大数据量列表优化
<template>
<div class="virtual-list" ref="container">
<div class="virtual-list__content" :style="{ height: totalHeight + 'px' }">
<div
v-for="item in visibleItems"
:key="item.id"
class="virtual-list__item"
:style="{
height: itemHeight + 'px',
transform: `translateY(${item.top}px)`
}"
>
<slot :item="item.data"></slot>
</div>
</div>
</div>
</template>
<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'
export default {
name: 'VirtualList',
props: {
items: {
type: Array,
required: true
},
itemHeight: {
type: Number,
default: 50
},
visibleCount: {
type: Number,
default: 10
}
},
setup(props) {
const container = ref(null)
const scrollTop = ref(0)
const totalHeight = computed(() => props.items.length * props.itemHeight)
const startIndex = computed(() => {
return Math.floor(scrollTop.value / props.itemHeight)
})
const endIndex = computed(() => {
return Math.min(
startIndex.value + props.visibleCount,
props.items.length - 1
)
})
const visibleItems = computed(() => {
return props.items.slice(startIndex.value, endIndex.value + 1).map((item, index) => ({
id: item.id,
data: item,
top: (startIndex.value + index) * props.itemHeight
}))
})
const handleScroll = () => {
scrollTop.value = container.value.scrollTop
}
onMounted(() => {
container.value.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
container.value?.removeEventListener('scroll', handleScroll)
})
return {
container,
totalHeight,
visibleItems
}
}
}
</script>
b.防抖和节流
// 防抖工具
export function debounce(func, wait, immediate = false) {
let timeout = null
return function executedFunction(...args) {
const later = () => {
timeout = null
if (!immediate) func(...args)
}
const callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func(...args)
}
}
// 节流工具
export function throttle(func, limit) {
let inThrottle = false
return function executedFunction(...args) {
if (!inThrottle) {
func(...args)
inThrottle = true
setTimeout(() => {
inThrottle = false
}, limit)
}
}
}
// 使用示例
import { debounce, throttle } from '@/utils/helpers'
export default {
methods: {
handleSearch: debounce(function(query) {
this.searchUsers(query)
}, 300),
handleScroll: throttle(function() {
this.updateScrollPosition()
}, 100)
}
}
03.内存优化
a.组件卸载清理
export default {
setup() {
let timer = null
let eventListener = null
onMounted(() => {
// 设置定时器
timer = setInterval(() => {
console.log('定时任务')
}, 1000)
// 添加事件监听
eventListener = () => {
console.log('窗口大小变化')
}
window.addEventListener('resize', eventListener)
})
onUnmounted(() => {
// 清理定时器
if (timer) {
clearInterval(timer)
timer = null
}
// 移除事件监听
if (eventListener) {
window.removeEventListener('resize', eventListener)
eventListener = null
}
})
return {}
}
}
b.对象池管理
// 对象池，避免频繁创建和销毁对象
class ObjectPool {
constructor(createFn, resetFn, maxSize = 100) {
this.createFn = createFn
this.resetFn = resetFn
this.pool = []
this.maxSize = maxSize
}
acquire() {
if (this.pool.length > 0) {
return this.pool.pop()
} else {
return this.createFn()
}
}
release(obj) {
if (this.pool.length < this.maxSize) {
this.resetFn(obj)
this.pool.push(obj)
}
}
clear() {
this.pool.length = 0
}
}
// 使用示例
const requestPool = new ObjectPool(
() => ({ url: '', method: 'GET', data: null }),
(obj) => {
obj.url = ''
obj.method = 'GET'
obj.data = null
}
)
function makeRequest(url, method, data) {
const request = requestPool.acquire()
request.url = url
request.method = method
request.data = data
return fetch(request.url, {
method: request.method,
body: JSON.stringify(request.data)
}).finally(() => {
requestPool.release(request)
})
}
7.5 常见问题解决
01.路由问题解决
a.路由冲突处理
// 路由冲突检测
function checkRouteConflicts(routes) {
const conflicts = []
for (let i = 0; i < routes.length; i++) {
for (let j = i + 1; j < routes.length; j++) {
const route1 = routes[i]
const route2 = routes[j]
if (isRouteConflicting(route1, route2)) {
conflicts.push({
route1: route1.path,
route2: route2.path,
type: 'path-conflict'
})
}
}
}
return conflicts
}
function isRouteConflicting(route1, route2) {
// 简单的路径冲突检测
const path1 = normalizePath(route1.path)
const path2 = normalizePath(route2.path)
return path1 === path2 || path1.startsWith(path2 + '/') || path2.startsWith(path1 + '/')
}
function normalizePath(path) {
return path.replace(/\/+/g, '/').replace(/\/$/, '') || '/'
}
// 使用示例
const routes = [
{ path: '/user/profile', component: UserProfile },
{ path: '/user', component: UserList },
{ path: '/user/profile', component: UserSettings } // 冲突
]
const conflicts = checkRouteConflicts(routes)
if (conflicts.length > 0) {
console.warn('发现路由冲突:', conflicts)
}
b.路由守卫优化
// 路由守卫性能优化
const routeGuards = new Map()
function createRouteGuard(name, guard) {
routeGuards.set(name, guard)
}
function executeRouteGuards(to, from, next) {
const guards = Array.from(routeGuards.values())
let index = 0
function executeNext() {
if (index >= guards.length) {
next()
return
}
const guard = guards[index++]
const result = guard(to, from, executeNext)
// 如果guard返回Promise，等待其完成
if (result && typeof result.then === 'function') {
result.then(executeNext).catch(error => {
console.error('路由守卫执行失败:', error)
next(false)
})
} else if (result === false) {
next(false)
} else {
executeNext()
}
}
executeNext()
}
// 创建优化的路由守卫
createRouteGuard('auth', (to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
return
}
next()
})
createRouteGuard('permission', (to, from, next) => {
if (to.meta.permission && !hasPermission(to.meta.permission)) {
next('/403')
return
}
next()
})
02.状态管理问题
a.状态持久化
// 状态持久化工具
class StatePersistence {
constructor(key = 'app-state', storage = localStorage) {
this.key = key
this.storage = storage
this.state = {}
}
setState(key, value) {
this.state[key] = value
this.persist()
}
getState(key, defaultValue = null) {
return this.state[key] ?? defaultValue
}
loadState() {
try {
const serialized = this.storage.getItem(this.key)
if (serialized) {
this.state = JSON.parse(serialized)
}
} catch (error) {
console.error('加载状态失败:', error)
this.state = {}
}
}
persist() {
try {
this.storage.setItem(this.key, JSON.stringify(this.state))
} catch (error) {
console.error('保存状态失败:', error)
}
}
clearState() {
this.state = {}
this.storage.removeItem(this.key)
}
}
const statePersistence = new StatePersistence()
// 在应用启动时加载状态
statePersistence.loadState()
// 监听状态变化并持久化
store.subscribe((mutation, state) => {
statePersistence.setState('vuex', state)
})
b.全局状态同步
// 全局状态同步工具
class GlobalStateSync {
constructor() {
this.subscribers = new Set()
this.state = {}
}
subscribe(callback) {
this.subscribers.add(callback)
return () => this.subscribers.delete(callback)
}
updateState(updates) {
const oldState = { ...this.state }
Object.assign(this.state, updates)
// 通知所有订阅者
this.subscribers.forEach(callback => {
try {
callback(this.state, oldState)
} catch (error) {
console.error('状态同步回调执行失败:', error)
}
})
}
getState(key) {
return key ? this.state[key] : this.state
}
}
const globalStateSync = new GlobalStateSync()
// 主应用中使用
globalStateSync.subscribe((newState, oldState) => {
if (newState.theme !== oldState.theme) {
applyTheme(newState.theme)
}
})
// 子应用中使用
export async function mount(props) {
const { onGlobalStateChange } = props
onGlobalStateChange((state, prevState) => {
console.log('全局状态变化:', state, prevState)
// 同步到本地状态
store.commit('updateGlobalState', state)
}, true)
}
03.样式问题解决
a.样式隔离工具
// CSS作用域工具
function generateScopedCSS(css, scopeId) {
// 简单的CSS作用域实现
return css.replace(/([^{]+){([^}]*)}/g, (match, selector, styles) => {
const scopedSelector = selector
.split(',')
.map(s => `${scopeId} ${s.trim()}`)
.join(', ')
return `${scopedSelector} {${styles}}`
})
}
// 使用示例
const originalCSS = `
.container { padding: 16px; }
.title { font-size: 18px; }
`
const scopedCSS = generateScopedCSS(originalCSS, '[data-vue-app]')
// 应用作用域样式
const styleElement = document.createElement('style')
styleElement.textContent = scopedCSS
document.head.appendChild(styleElement)
b.主题管理
// 主题管理工具
class ThemeManager {
constructor() {
this.currentTheme = 'light'
this.themes = {
light: {
primary: '#1976d2',
secondary: '#dc004e',
background: '#ffffff',
surface: '#f5f5f5',
text: '#000000'
},
dark: {
primary: '#90caf9',
secondary: '#f48fb1',
background: '#121212',
surface: '#1e1e1e',
text: '#ffffff'
}
}
this.subscribers = new Set()
}
setTheme(themeName) {
if (!this.themes[themeName]) {
console.warn(`主题 ${themeName} 不存在`)
return
}
this.currentTheme = themeName
this.applyTheme()
this.notifySubscribers()
this.persistTheme()
}
getCurrentTheme() {
return this.themes[this.currentTheme]
}
subscribe(callback) {
this.subscribers.add(callback)
callback(this.getCurrentTheme())
return () => this.subscribers.delete(callback)
}
applyTheme() {
const theme = this.getCurrentTheme()
const root = document.documentElement
Object.entries(theme).forEach(([key, value]) => {
root.style.setProperty(`--theme-${key}`, value)
})
root.setAttribute('data-theme', this.currentTheme)
}
notifySubscribers() {
const theme = this.getCurrentTheme()
this.subscribers.forEach(callback => {
try {
callback(theme)
} catch (error) {
console.error('主题更新回调失败:', error)
}
})
}
persistTheme() {
localStorage.setItem('theme', this.currentTheme)
}
loadTheme() {
const savedTheme = localStorage.getItem('theme')
if (savedTheme && this.themes[savedTheme]) {
this.setTheme(savedTheme)
}
}
}
const themeManager = new ThemeManager()
// 应用启动时加载主题
themeManager.loadTheme()
// 在组件中使用
export default {
setup() {
const theme = ref(themeManager.getCurrentTheme())
onMounted(() => {
themeManager.subscribe((newTheme) => {
theme.value = newTheme
})
})
const toggleTheme = () => {
const newTheme = themeManager.currentTheme === 'light' ? 'dark' : 'light'
themeManager.setTheme(newTheme)
}
return {
theme,
toggleTheme
}
}
}
7.6 企业级应用案例
01.大型电商案例
a.业务架构设计
电商前端微前端架构
├── 主应用 (Portal)
│ ├── 用户中心
│ ├── 搜索服务
│ ├── 购物车
│ └── 订单管理
├── 商品子应用 (Product App)
│ ├── 商品列表
│ ├── 商品详情
│ ├── 分类浏览
│ └── 品牌专区
├── 营销子应用 (Marketing App)
│ ├── 促销活动
│ ├── 优惠券
│ ├── 秒杀活动
│ └── 积分商城
├── 支付子应用 (Payment App)
│ ├── 结算页面
│ ├── 支付方式
│ ├── 发票管理
│ └── 退款处理
└── 商家子应用 (Merchant App)
├── 商家入驻
├── 商品管理
├── 订单处理
└── 数据分析
b.技术实现方案
// 主应用配置
const microApps = [
{
name: 'product-app',
entry: '//product.example.com',
container: '#product-container',
activeRule: '/product',
props: {
apiBaseUrl: 'https://api.product.example.com',
theme: 'ecommerce',
features: ['recommendation', 'comparison']
}
},
{
name: 'marketing-app',
entry: '//marketing.example.com',
container: '#marketing-container',
activeRule: '/marketing',
props: {
apiBaseUrl: 'https://api.marketing.example.com',
userTier: 'premium'
}
}
];
// 全局状态管理
const globalState = initGlobalState({
user: {
id: null,
tier: 'basic',
preferences: {}
},
cart: {
items: [],
total: 0
},
order: {
current: null,
history: []
}
});
02.金融服务平台案例
a.金融级安全架构
金融微前端安全架构
├── 安全网关层
│ ├── 身份认证
│ ├── 权限控制
│ ├── 数据加密
│ └── 审计日志
├── 主应用 (Banking Portal)
│ ├── 账户总览
│ ├── 交易记录
│ ├── 风险提示
│ └── 消息中心
├── 银行卡子应用 (Card Services)
│ ├── 卡片管理
│ ├── 账单查询
│ ├── 消费记录
│ └── 积分兑换
├── 投资子应用 (Investment)
│ ├── 理财产品
│ ├── 基金管理
│ ├── 股票交易
│ └── 风险评估
└── 贷款子应用 (Loan Services)
├── 贷款申请
├── 还款管理
├── 利率计算
└ - 信用评估
b.合规性实现
// 安全配置
const securityConfig = {
// 跨域配置
cors: {
origin: ['https://bank.example.com'],
credentials: true
},
// CSP策略
contentSecurityPolicy: {
"default-src": "'self'",
"script-src": "'self' 'unsafe-inline'",
"style-src": "'self' 'unsafe-inline'",
"img-src": "'self' data:",
"connect-src": "'self' https://api.bank.example.com"
},
// 安全头
securityHeaders: {
'X-Content-Type-Options': 'nosniff',
'X-Frame-Options': 'DENY',
'X-XSS-Protection': '1; mode=block',
'Strict-Transport-Security': 'max-age=31536000; includeSubDomains'
}
};
// 数据脱敏
function maskSensitiveData(data, type) {
const maskRules = {
phone: (phone) => phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
idCard: (idCard) => idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2'),
bankCard: (card) => card.replace(/(\d{4})\d+(\d{4})/, '$1 **** **** $2'),
email: (email) => email.replace(/(.{2}).*(@.*)/, '$1***$2')
};
return maskRules[type] ? maskRules[type](data) : data;
}
03.企业管理平台案例
a.多租户架构
企业SaaS平台架构
├── 租户管理层
│ ├── 租户注册
│ ├── 域名管理
│ ├── 数据隔离
│ └── 资源配额
├── 主应用 (Workspace)
│ ├── 工作台
│ ├── 消息中心
│ ├── 系统设置
│ └── 帮助中心
├── CRM子应用
│ ├── 客户管理
│ ├── 销售机会
│ ├── 合同管理
│ └── 数据分析
├── HR子应用
│ ├── 员工管理
│ ├── 考勤系统
│ ├── 薪酬管理
│ └── 绩效考核
├── 项目管理子应用
│ ├── 项目列表
│ ├── 任务管理
│ ├── 时间跟踪
│ └── 报表统计
└── 财务子应用
├── 预算管理
├── 费用报销
├── 财务报表
└── 审计追踪
b.租户隔离实现
// 租户上下文管理
class TenantContext {
constructor() {
this.currentTenant = null;
this.tenantConfig = new Map();
}
setTenant(tenantId) {
this.currentTenant = tenantId;
this.loadTenantConfig(tenantId);
}
getTenant() {
return this.currentTenant;
}
async loadTenantConfig(tenantId) {
try {
const config = await fetch(`/api/tenants/${tenantId}/config`);
this.tenantConfig.set(tenantId, await config.json());
this.applyTenantTheme();
} catch (error) {
console.error('加载租户配置失败:', error);
}
}
getTenantConfig(key) {
const config = this.tenantConfig.get(this.currentTenant);
return config ? config[key] : null;
}
applyTenantTheme() {
const theme = this.getTenantConfig('theme');
if (theme) {
Object.entries(theme).forEach(([key, value]) => {
document.documentElement.style.setProperty(`--tenant-${key}`, value);
});
}
}
getTenantApiUrl(path) {
const baseUrl = this.getTenantConfig('apiBaseUrl');
return `${baseUrl}${path}`;
}
}
const tenantContext = new TenantContext();
// 请求拦截器
axios.interceptors.request.use((config) => {
const tenantId = tenantContext.getTenant();
if (tenantId) {
config.headers['X-Tenant-ID'] = tenantId;
config.baseURL = tenantContext.getTenantApiUrl(config.url);
}
return config;
});
04.教育平台案例
a.教学微前端架构
在线教育平台架构
├── 主应用 (Learning Portal)
│ ├── 课程广场
│ ├── 学习进度
│ ├── 个人中心
│ └-- 问答社区
├── 课程管理子应用
│ ├── 课程创建
│ ├── 内容编辑
│ ├── 发布管理
│ └── 学员管理
├── 直播子应用
│ ├── 直播间
│ ├── 互动工具
│ ├── 录播管理
│ └── 设备检测
├── 作业子应用
│ ├── 作业发布
│ ├── 在线作答
│ ├── 自动批改
│ └-- 成绩统计
└── 考试子应用
├── 考试创建
├── 在线考试
├── 防作弊系统
└-- 成绩分析
b.教育特色功能
// 学习进度跟踪
class LearningProgress {
constructor() {
this.progress = new Map();
this.callbacks = new Set();
}
updateProgress(courseId, lessonId, progress) {
const key = `${courseId}:${lessonId}`;
const previous = this.progress.get(key) || 0;
this.progress.set(key, Math.max(previous, progress));
this.notifyCallbacks(courseId, lessonId, progress);
this.syncProgress(courseId, lessonId, progress);
}
getProgress(courseId, lessonId) {
const key = `${courseId}:${lessonId}`;
return this.progress.get(key) || 0;
}
getCourseProgress(courseId) {
const courseLessons = Array.from(this.progress.keys())
.filter(key => key.startsWith(courseId));
if (courseLessons.length === 0) return 0;
const totalProgress = courseLessons.reduce((sum, key) => {
return sum + this.progress.get(key);
}, 0);
return Math.round(totalProgress / courseLessons.length);
}
onProgressUpdate(callback) {
this.callbacks.add(callback);
return () => this.callbacks.delete(callback);
}
notifyCallbacks(courseId, lessonId, progress) {
this.callbacks.forEach(callback => {
try {
callback({ courseId, lessonId, progress });
} catch (error) {
console.error('进度更新回调失败:', error);
}
});
}
async syncProgress(courseId, lessonId, progress) {
try {
await fetch('/api/learning/progress', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ courseId, lessonId, progress })
});
} catch (error) {
console.error('同步学习进度失败:', error);
}
}
}
const learningProgress = new LearningProgress();
// 防作弊监控
class AntiCheatingMonitor {
constructor() {
this.suspiciousActions = [];
this.isMonitoring = false;
}
startMonitoring() {
if (this.isMonitoring) return;
this.isMonitoring = true;
this.setupEventListeners();
}
stopMonitoring() {
this.isMonitoring = false;
this.removeEventListeners();
}
setupEventListeners() {
// 监听窗口失焦
window.addEventListener('blur', this.handleWindowBlur.bind(this));
// 监控剪切板操作
document.addEventListener('copy', this.handleCopy.bind(this));
document.addEventListener('paste', this.handlePaste.bind(this));
// 监控快捷键
document.addEventListener('keydown', this.handleKeyDown.bind(this));
// 监控右键菜单
document.addEventListener('contextmenu', this.handleContextMenu.bind(this));
}
removeEventListeners() {
window.removeEventListener('blur', this.handleWindowBlur);
document.removeEventListener('copy', this.handleCopy);
document.removeEventListener('paste', this.handlePaste);
document.removeEventListener('keydown', this.handleKeyDown);
document.removeEventListener('contextmenu', this.handleContextMenu);
}
handleWindowBlur() {
if (this.isMonitoring) {
this.recordSuspiciousAction('WINDOW_BLUR', '切换窗口');
}
}
handleCopy(event) {
if (this.isMonitoring) {
this.recordSuspiciousAction('COPY', '复制内容');
}
}
handlePaste(event) {
if (this.isMonitoring) {
this.recordSuspiciousAction('PASTE', '粘贴内容');
}
}
handleKeyDown(event) {
if (this.isMonitoring) {
const suspiciousKeys = ['F12', 'Ctrl+Shift+I', 'Ctrl+Shift+C'];
const keyCombo = this.getKeyCombo(event);
if (suspiciousKeys.includes(keyCombo)) {
this.recordSuspiciousAction('SUSPICIOUS_KEY', keyCombo);
event.preventDefault();
}
}
}
handleContextMenu(event) {
if (this.isMonitoring) {
this.recordSuspiciousAction('CONTEXT_MENU', '右键菜单');
event.preventDefault();
}
}
getKeyCombo(event) {
const parts = [];
if (event.ctrlKey) parts.push('Ctrl');
if (event.shiftKey) parts.push('Shift');
if (event.altKey) parts.push('Alt');
parts.push(event.key);
return parts.join('+');
}
recordSuspiciousAction(type, description) {
const action = {
type,
description,
timestamp: Date.now(),
url: window.location.href
};
this.suspiciousActions.push(action);
// 上报到服务器
this.reportSuspiciousAction(action);
// 检查是否需要警告
this.checkSuspiciousLevel();
}
async reportSuspiciousAction(action) {
try {
await fetch('/api/exam/suspicious-action', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(action)
});
} catch (error) {
console.error('上报可疑行为失败:', error);
}
}
checkSuspiciousLevel() {
const recentActions = this.suspiciousActions.filter(
action => Date.now() - action.timestamp < 60000 // 最近1分钟
);
if (recentActions.length >= 5) {
this.showWarning('检测到可疑操作，请注意考试纪律！');
}
}
showWarning(message) {
// 显示警告信息
const warning = document.createElement('div');
warning.className = 'anti-cheating-warning';
warning.textContent = message;
warning.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #ff4444;
color: white;
padding: 16px;
border-radius: 8px;
z-index: 9999;
`;
document.body.appendChild(warning);
setTimeout(() => {
document.body.removeChild(warning);
}, 5000);
}
}
const antiCheatingMonitor = new AntiCheatingMonitor();