基于qiankun的微前端架构实践

随着前端应用规模的不断扩大，微前端架构作为一种解决大型前端应用拆分与整合的方案，受到了越来越多开发者的关注。本文将分享基于 qiankun 的微前端项目实践，展示如何实现一个包含 React 主应用和 Vue/React 子应用的微前端系统。

一、项目概述

本项目采用 qiankun 作为微前端框架，实现了一个模块化、可扩展的前端架构。项目结构如下：

• 主应用：基于 React 19 + Ant Design 构建，负责整体布局、模拟用户登录和子应用加载
• React 子应用：基于 React 19 + Ant Design 构建，提供业务功能模块
• Vue 子应用：基于 Vue 3 + Element Plus + Pinia 构建，提供另一部分业务功能

这种架构设计使得不同技术栈的团队可以独立开发、测试和部署各自的子应用，同时又能在统一的主应用中无缝集成，为用户提供一致的体验。
项目演示案例：

• 主应用
  
• vue子应用
  
• react子应用
  

二、主应用实现

1. qiankun 集成与配置

主应用是微前端架构的核心，负责注册和管理各个子应用。在 main-app/src/index.js 中，我们通过 qiankun 提供的 API 完成子应用的注册和启动：

import {
   
    registerMicroApps, start, addGlobalUncaughtErrorHandler } from 'qiankun';
import {
   
    state } from './MicroAppState'

// 注册子应用
registerMicroApps([
  {
   
   
    name: 'app-vue',
    entry: process.env.NODE_ENV === 'development' ? '//localhost:8080/' : '/child/vue-history/',
    container: '#container',
    activeRule: '/app-vue-history'
  },
  {
   
   
    name: 'react-app',
    entry: process.env.NODE_ENV === 'development' ?'//localhost:3002':'/child/react-history/',
    container: '#container',
    activeRule: '/react',
    props: state
  },
], {
   
   
  afterMount: (app) => {
   
   
    // 子应用挂载后的回调
  }
});

// 启动 qiankun
start({
   
   
  sandbox: false
});

这段代码中，我们做了以下几件事：

• 通过 registerMicroApps 注册了两个子应用（Vue 和 React）
• 为每个子应用配置了名称、入口地址、容器和激活规则
• 通过 start 启动 qiankun，关闭了沙箱模式（sandbox: false）

2. 全局状态管理

为了实现主应用与子应用之间的通信，我们使用了 qiankun 的全局状态管理功能。在 main-app/src/MicroAppState.js 中：

import {
   
    initGlobalState } from 'qiankun';

export let state = {
   
   
  userName: 'qiankun',
  app: null, // 当前运行的应用名称
  sidebarVisible: true // 主应用侧边栏是否显示
}

// 初始化 state
const actions = initGlobalState(state);

actions.onGlobalStateChange((newVal, prev) => {
   
   
  console.log(newVal, prev);
});

export const setGlobalState = (newState) => {
   
   
  actions.setGlobalState(newState)
}

export const onGlobalStateChange = (callback) => {
   
    return actions.onGlobalStateChange(callback);</