微前端框架qiankun入门指南：主应用与子应用集成详解

原创于 2025-06-02 09:06:16 发布

· 397 阅读

版权

微前端框架qiankun入门指南：主应用与子应用集成详解

qiankun Blazing fast, simple and complete solution for micro frontends. 项目地址: https://gitcode.com/gh_mirrors/qia/qiankun

前言

微前端架构正在成为大型前端应用开发的主流模式，而qiankun作为基于single-spa的微前端解决方案，提供了更加完善的开发体验。本文将详细介绍如何使用qiankun框架实现主应用与子应用的集成。

主应用配置

1. 安装依赖

首先需要在主应用中安装qiankun核心库：

yarn add qiankun
# 或者使用npm
npm install qiankun --save

2. 注册子应用

在主应用入口文件中，需要注册所有需要管理的子应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react子应用',  // 子应用唯一标识
    entry: '//localhost:7100',  // 子应用入口地址
    container: '#subapp-container',  // 挂载容器ID
    activeRule: '/react',  // 激活路由规则
  },
  {
    name: 'vue子应用',
    entry: { scripts: ['//localhost:7100/main.js'] },  // 也支持对象格式
    container: '#subapp-container',
    activeRule: '/vue',
  },
]);

// 启动qiankun
start();

关键点说明：

name：子应用唯一名称，建议与package.json中的name保持一致
entry：支持字符串或对象格式，可以是完整URL或相对路径
container：子应用挂载的DOM节点
activeRule：路由匹配规则，可以是字符串、函数或数组

当浏览器URL发生变化时，qiankun会自动匹配activeRule返回true的子应用，并依次调用其生命周期钩子函数。

子应用配置

子应用无需额外安装qiankun依赖，但需要做以下改造：

1. 导出生命周期钩子

子应用需要在其入口文件(通常是webpack配置的entry文件)中导出三个必要的生命周期函数：

// 初始化钩子，只会执行一次
export async function bootstrap() {
  console.log('子应用初始化');
}

// 挂载钩子，每次进入都会调用
export async function mount(props) {
  ReactDOM.render(
    <App />,
    props.container 
      ? props.container.querySelector('#root') 
      : document.getElementById('root')
  );
}

// 卸载钩子，每次切出/卸载都会调用
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container 
      ? props.container.querySelector('#root') 
      : document.getElementById('root')
  );
}

// 可选更新钩子
export async function update(props) {
  console.log('子应用更新', props);
}

生命周期详解：

bootstrap：子应用初始化时调用，适合做全局变量设置等一次性操作
mount：子应用挂载时调用，通常在这里执行渲染逻辑
unmount：子应用卸载时调用，需要清理定时器、事件监听等
update：可选，使用loadMicroApp方式加载子应用时才会触发

2. 修改打包配置

为了让主应用能正确识别子应用暴露的资源，需要修改子应用的webpack配置：

Webpack 5配置

const packageName = require('./package.json').name;

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    chunkLoadingGlobal: `webpackJsonp_${packageName}`,
  },
};

Webpack 4配置

const packageName = require('./package.json').name;

module.exports = {
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
};

配置说明：