阿里乾坤框架安装使用指南

以下是关于阿里微前端框架 qiankun 的详细介绍，包含安装、使用步骤及在多个 Vue 项目中的应用指南：

一、qiankun 框架简介

qiankun 是阿里巴巴开源的一款基于 Single-SPA 的微前端框架，支持将多个独立的前端应用（不同技术栈）整合为一个完整的应用。核心特性：

• 技术栈无关：支持 Vue、React、Angular 等。
• 样式/JS 隔离：通过沙箱机制避免冲突。
• 资源预加载：提升子应用加载速度。
• 通信机制：主应用与子应用间数据传递。

二、安装与基础配置

1. 主应用安装

在主项目（基座应用）中安装 qiankun：

npm install qiankun --save
# 或
yarn add qiankun

2. 主应用初始化

在主应用的入口文件（如 main.js）中注册子应用：

import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'vue-sub-app',  // 子应用唯一标识
    entry: '//localhost:7101',  // 子应用入口（开发环境可配本地服务，生产环境配静态资源地址）
    container: '#subapp-container',  // 子应用挂载节点
    activeRule: '/vue-sub-app',  // 路由匹配规则
  },
  // 可注册多个子应用
]);

// 启动 qiankun
start();

3. 主应用路由配置（Vue Router）

确保主应用路由模式为 history：

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 主应用路由...
  ],
});

三、子应用配置（以 Vue 为例）

1. 子应用导出生命周期钩子

在子应用入口文件（如 main.js）中导出 bootstrap, mount, unmount：

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,
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

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

// 导出生命周期
export async function bootstrap() {
  console.log('子应用启动');
}

export async function mount(props) {
  console.log('子应用挂载');
  render(props);
}

export async function unmount() {
  console.log('子应用卸载');
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

2. 子应用打包配置（vue.config.js）

修改子应用的 Webpack 配置，允许作为 UMD 格式被 qiankun 加载：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7101,  // 与主应用注册的端口一致
    headers: {
      'Access-Control-Allow-Origin': '*',  // 允许跨域
    },
  },
  configureWebpack: {
    output: {
      library: 'vue-sub-app',  // 子应用名称（与主应用注册的 name 一致）
      libraryTarget: 'umd',     // 打包为 UMD 格式
      chunkLoadingGlobal: 'webpackJsonp_vue-sub-app',  // 避免全局变量冲突
    },
  },
});

四、多 Vue 项目整合示例

场景描述

• 主应用：Vue 项目（端口 7100）
• 子应用1：Vue 项目（端口 7101，路由前缀 /vue-app1）
• 子应用2：Vue 项目（端口 7102，路由前缀 /vue-app2）

主应用注册多个子应用

registerMicroApps([
  {
    name: 'vue-app1',
    entry: '//localhost:7101',
    container: '#subapp-container',
    activeRule: '/vue-app1',
  },
  {
    name: 'vue-app2',
    entry: '//localhost:7102',
    container: '#subapp-container',
    activeRule: '/vue-app2',
  },
]);

子应用独立运行与调试

确保子应用可通过自身端口独立运行（通过 npm run serve），同时通过主应用路由访问。

五、注意事项

1. 跨域问题

   • 子应用需配置 Access-Control-Allow-Origin: *（开发环境可通过 devServer.headers 设置）。
   • 生产环境确保静态资源服务器允许跨域。

2. 路由冲突

   • 主应用和子应用路由避免重复。
   • 子应用内部路由应基于 activeRule 前缀（如 /vue-app1/home）。

3. 静态资源路径
   子应用需设置 publicPath，确保资源正确加载：

   // vue.config.js
   module.exports = {
     publicPath: process.env.NODE_ENV === 'production' ? '/vue-app1/' : '/',
   };
   

4. 全局状态管理
   使用 qiankun 提供的通信 API：

   // 主应用初始化状态
   import { initGlobalState } from 'qiankun';
   const actions = initGlobalState({ user: 'admin' });
   
   // 子应用监听状态变化
   export function mount(props) {
     props.onGlobalStateChange((state, prev) => {
       console.log('全局状态变更:', state);
     });
   }
   

六、总结

通过 qiankun 可将多个 Vue 项目整合为统一应用，实现技术栈无关性和独立部署。重点关注 路由配置、生命周期管理、通信机制 和 环境隔离。实际项目中可根据需求扩展加载策略、性能优化等功能。