vue-vben-admin微前端集成：qiankun微前端架构适配

引言

在大型Web应用开发中，随着业务的不断扩展，单一的前端应用往往会变得臃肿不堪，难以维护。微前端架构应运而生，它将一个庞大的前端应用拆分成多个小型应用，每个小型应用可以独立开发、测试、部署和运行，从而提高开发效率和系统的可维护性。qiankun是一款基于single-spa的微前端框架，它提供了更加完善的微前端解决方案，包括应用的加载、卸载、通信等功能。本文将详细介绍如何在vue-vben-admin项目中集成qiankun微前端架构，实现应用的模块化拆分和灵活部署。

qiankun微前端架构概述

qiankun微前端架构的核心思想是将一个大型应用拆分成多个微应用（Micro App），每个微应用都是一个独立的前端应用，可以使用不同的技术栈（如Vue、React、Angular等）进行开发。这些微应用共享一个主应用（Main App）提供的基础设施，如路由、状态管理、样式等。主应用负责微应用的注册、加载、卸载和通信，微应用则专注于自身的业务逻辑实现。

qiankun微前端架构的主要特点包括：

• 技术栈无关：主应用和微应用可以使用不同的技术栈，提高了技术选型的灵活性。
• 独立开发、测试和部署：每个微应用可以独立进行开发、测试和部署，不影响其他微应用的运行。
• 应用隔离：微应用之间通过沙箱机制进行隔离，避免了样式和JavaScript的冲突。
• 通信机制：提供了基于全局状态和自定义事件的通信方式，方便微应用之间的数据交互。

vue-vben-admin项目结构分析

vue-vben-admin是一个基于Vue.js和Element UI的后台管理系统，其项目结构如下所示：

• apps：包含多个应用，如backend-mock、web-antd、web-ele、web-naive等。
• docs：项目文档。
• internal：内部工具和配置。
• packages：项目的核心包，如core、constants、effects、icons、locales、preferences、stores、styles、types、utils等。
• playground：测试和演示环境。
• scripts：构建和部署脚本。

从项目结构可以看出，vue-vben-admin已经具备了一定的模块化设计，这为集成qiankun微前端架构奠定了基础。我们可以将现有的应用拆分成多个微应用，如将web-antd、web-ele、web-naive等作为独立的微应用，由一个主应用进行统一管理。

qiankun微前端集成步骤

1. 安装qiankun

首先，需要在主应用和微应用中安装qiankun依赖。在vue-vben-admin项目的根目录下执行以下命令：

npm install qiankun --save

2. 主应用配置

主应用需要负责微应用的注册、加载和管理。在vue-vben-admin项目中，我们可以在主应用的入口文件中进行qiankun的配置。以下是一个简单的主应用配置示例：

import { registerMicroApps, start } from 'qiankun';

// 注册微应用
registerMicroApps([
  {
    name: 'web-antd', // 微应用名称
    entry: '//localhost:3001', // 微应用入口地址
    container: '#micro-app-container', // 微应用容器
    activeRule: '/web-antd', // 微应用激活规则
    props: {
      // 传递给微应用的参数
      token: 'xxx',
    },
  },
  {
    name: 'web-ele',
    entry: '//localhost:3002',
    container: '#micro-app-container',
    activeRule: '/web-ele',
  },
  {
    name: 'web-naive',
    entry: '//localhost:3003',
    container: '#micro-app-container',
    activeRule: '/web-naive',
  },
]);

// 启动qiankun
start();

在上述代码中，我们首先通过registerMicroApps方法注册了三个微应用，分别是web-antd、web-ele和web-naive。每个微应用都需要指定名称、入口地址、容器和激活规则。然后，通过start方法启动qiankun，开始监听路由变化，加载和卸载微应用。

3. 微应用配置

微应用需要进行一些适配qiankun的配置，以便能够被主应用正确加载和运行。以下是一个微应用的配置示例（以web-antd为例）：

在web-antd应用的src/main.ts文件中，添加以下代码：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

let app: any = null;

// 渲染微应用
function render(props: any = {}) {
  const { container } = props;
  app = createApp(App);
  app.use(router).use(store).mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时，直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 微应用生命周期钩子
export async function bootstrap() {
  console.log('web-antd bootstrap');
}

export async function mount(props: any) {
  console.log('web-antd mount', props);
  render(props);
}

export async function unmount() {
  console.log('web-antd unmount');
  app.unmount();
  app._container.innerHTML = '';
  app = null;
}

在上述代码中，我们定义了微应用的渲染函数render，它会根据是否在qiankun环境中运行来决定如何挂载应用。当微应用独立运行时，直接调用render函数进行渲染；当微应用被qiankun加载时，会通过mount生命周期钩子函数来调用render函数，并传入主应用传递的参数。同时，我们还定义了bootstrap和unmount生命周期钩子函数，分别在微应用启动和卸载时执行。

此外，还需要修改微应用的打包配置，以确保微应用能够被qiankun正确识别和加载。在web-antd应用的vite.config.ts文件中，添加以下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3001,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  build: {
    library: {
      name: 'web-antd',
      formats: ['umd'],
      entry: 'src/main.ts',
    },
  },
});

在上述配置中，我们设置了开发服务器的端口为3001，并添加了跨域头信息，以便主应用能够加载微应用的资源。在构建配置中，我们将微应用打包成umd格式的库，以便qiankun能够正确加载。

4. 应用间通信

在微前端架构中，应用间的通信是一个重要的问题。qiankun提供了多种通信方式，如基于props的通信、基于全局状态的通信等。以下是一个基于props的通信示例：

在主应用中注册微应用时，可以通过props参数传递数据给微应用：

registerMicroApps([
  {
    name: 'web-antd',
    entry: '//localhost:3001',
    container: '#micro-app-container',
    activeRule: '/web-antd',
    props: {
      token: 'xxx',
      userInfo: { name: '张三', age: 20 },
    },
  },
]);

在微应用的mount生命周期钩子函数中，可以获取到主应用传递的参数：

export async function mount(props: any) {
  console.log('web-antd mount', props);
  // 获取主应用传递的参数
  const { token, userInfo } = props;
  // 将参数存储到微应用的状态管理中
  store.commit('setToken', token);
  store.commit('setUserInfo', userInfo);
  render(props);
}

除了基于props的通信方式，qiankun还提供了基于全局状态的通信方式，如通过initGlobalState方法创建全局状态，并在主应用和微应用中进行订阅和修改。

5. 样式隔离

为了避免微应用之间的样式冲突，qiankun提供了样式隔离机制。在主应用中启动qiankun时，可以通过sandbox配置项开启样式隔离：

start({
  sandbox: {
    strictStyleIsolation: true, // 严格的样式隔离
  },
});

开启严格的样式隔离后，qiankun会为每个微应用的样式添加一个唯一的属性选择器，确保样式只在当前微应用中生效。

总结

通过本文的介绍，我们了解了如何在vue-vben-admin项目中集成qiankun微前端架构，实现应用的模块化拆分和灵活部署。首先，我们对qiankun微前端架构进行了概述，了解了其核心思想和主要特点。然后，分析了vue-vben-admin项目的结构，为集成qiankun奠定了基础。接着，详细介绍了qiankun微前端集成的步骤，包括安装qiankun、主应用配置、微应用配置、应用间通信和样式隔离等。最后，通过实际的代码示例，展示了如何在vue-vben-admin项目中实现qiankun微前端架构的适配。

微前端架构为大型Web应用的开发和维护提供了一种新的思路和解决方案，它可以提高开发效率、降低系统复杂度、增强系统的可扩展性和可维护性。在vue-vben-admin项目中集成qiankun微前端架构，可以充分发挥两者的优势，构建更加灵活、高效和稳定的Web应用。

参考资料

• qiankun官方文档
• vue-vben-admin项目文档
• 微前端架构实践指南