【Vue】微前端架构与Vue（qiankun、Micro-App）

个人主页：Guiat
归属专栏：Vue

文章目录

[1. 微前端架构概述](#1. 微前端架构概述)
- [1.1 什么是微前端](#1.1 什么是微前端)
- [1.2 微前端的核心价值](#1.2 微前端的核心价值)
- [1.3 微前端的实现方式](#1.3 微前端的实现方式)
[2. qiankun 框架详解](#2. qiankun 框架详解)
- [2.1 qiankun 简介](#2.1 qiankun 简介)
- [2.2 qiankun 的核心特性](#2.2 qiankun 的核心特性)
- [2.3 qiankun 的基本使用](#2.3 qiankun 的基本使用)
- - [2.3.1 主应用配置](#2.3.1 主应用配置)
  - [2.3.2 子应用配置（Vue.js 为例）](#2.3.2 子应用配置（Vue.js 为例）)
- [2.4 qiankun 通信机制](#2.4 qiankun 通信机制)
- - [2.4.1 基于 Props 的通信](#2.4.1 基于 Props 的通信)
  - [2.4.2 基于全局状态管理](#2.4.2 基于全局状态管理)
[3. Micro-App 框架详解](#3. Micro-App 框架详解)
- [3.1 Micro-App 简介](#3.1 Micro-App 简介)
- [3.2 Micro-App 的核心特性](#3.2 Micro-App 的核心特性)
- [3.3 Micro-App 的基本使用](#3.3 Micro-App 的基本使用)
- - [3.3.1 安装依赖](#3.3.1 安装依赖)
  - [3.3.2 主应用配置（Vue 为例）](#3.3.2 主应用配置（Vue 为例）)
  - [3.3.3 子应用配置（Vue 为例）](#3.3.3 子应用配置（Vue 为例）)
- [3.4 Micro-App 的通信机制](#3.4 Micro-App 的通信机制)
- - [3.4.1 基于 Data 属性通信](#3.4.1 基于 Data 属性通信)
  - [3.4.2 发布订阅通信](#3.4.2 发布订阅通信)
[4. qiankun 与 Micro-App 的对比分析](#4. qiankun 与 Micro-App 的对比分析)
- [4.1 技术实现方式对比](#4.1 技术实现方式对比)
- [4.2 功能特性对比](#4.2 功能特性对比)
- [4.3 适用场景分析](#4.3 适用场景分析)
- - [4.3.1 qiankun 适用场景](#4.3.1 qiankun 适用场景)
  - [4.3.2 Micro-App 适用场景](#4.3.2 Micro-App 适用场景)
[5. 微前端实践建议](#5. 微前端实践建议)
- [5.1 微前端架构设计原则](#5.1 微前端架构设计原则)
- [5.2 常见问题与解决方案](#5.2 常见问题与解决方案)
- - [5.2.1 路由管理](#5.2.1 路由管理)
  - [5.2.2 公共依赖共享](#5.2.2 公共依赖共享)
- [5.3 性能优化策略](#5.3 性能优化策略)
[6. 微前端的未来发展趋势](#6. 微前端的未来发展趋势)
- [6.1 技术演进方向](#6.1 技术演进方向)
- [6.2 生态建设与标准化](#6.2 生态建设与标准化)
- [6.3 企业实践案例分析](#6.3 企业实践案例分析)

正文

1. 微前端架构概述

1.1 什么是微前端

微前端是一种前端架构模式，它将前端应用分解成一系列小型、自治的应用，可以独立开发、测试和部署。这些小型应用最终组合成一个完整的应用。微前端架构借鉴了微服务的理念，旨在解决大型前端应用开发和维护的复杂性问题。

1.2 微前端的核心价值

技术栈无关：每个微应用可以使用不同的技术栈
独立开发、部署：各团队可以独立开发、测试、部署各自的微应用
增量升级：可以逐步升级应用的部分功能，而不是整体重构
团队自治：不同团队可以独立负责各自的微应用，提高开发效率

1.3 微前端的实现方式

微前端架构有多种实现方式：
微前端实现方式基于路由分发基于iFrame 基于Web Components 基于JavaScript模块化基于构建时集成 qiankun Micro-App

2. qiankun 框架详解

2.1 qiankun 简介

qiankun（乾坤）是蚂蚁金服推出的一个基于 single-spa 的微前端实现库，旨在让微前端的使用更加简单。其名字取自中国传统文化中的"乾坤"，寓意为包罗万象。

2.2 qiankun 的核心特性

基于 single-spa 封装，提供了更加开箱即用的 API
技术栈无关，支持多框架（React、Vue、Angular 等）
JS 沙箱，确保子应用之间的 JavaScript 变量和环境隔离
样式隔离，防止子应用样式互相污染
预加载，提高子应用加载速度

2.3 qiankun 的基本使用

2.3.1 主应用配置

javascript 复制代码

// main.js
import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'vue-app',  // 子应用名称
    entry: '//localhost:8080',  // 子应用入口
    container: '#vue-app',  // 子应用挂载的DOM节点
    activeRule: '/vue-app',  // 激活规则（路由匹配）
  },
  {
    name: 'react-app',
    entry: '//localhost:3000',
    container: '#react-app',
    activeRule: '/react-app',
  }
]);

// 启动微前端服务
start();

2.3.2 子应用配置（Vue.js 为例）

javascript 复制代码

// vue.config.js
const { name } = require('./package');

module.exports = {
  devServer: {
    port: 8080,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

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

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

// 导出生命周期函数
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

2.4 qiankun 通信机制

qiankun 提供了多种应用间通信方式：

2.4.1 基于 Props 的通信

javascript 复制代码

// 主应用
import { registerMicroApps, start } from 'qiankun';

const sharedData = {
  user: { name: 'Zhang San' },
};

registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:8080',
    container: '#vue-app',
    activeRule: '/vue-app',
    props: { 
      sharedData,
      onEvent: (data) => console.log(data) 
    }
  }
]);

// 子应用
export async function mount(props) {
  console.log(props.sharedData.user.name);  // 'Zhang San'
  props.onEvent('Event from sub-app');
}

2.4.2 基于全局状态管理

javascript 复制代码

// 主应用
import { registerMicroApps, start, initGlobalState } from 'qiankun';

// 初始化全局状态
const actions = initGlobalState({
  user: { name: 'Zhang San' },
  theme: 'dark',
});

// 监听全局状态变化
actions.onGlobalStateChange((state, prev) => {
  console.log('主应用观察到状态变化：', state, prev);
});

// 更新状态
actions.setGlobalState({ theme: 'light' });

// 子应用
export function mount(props) {
  // 获取全局状态并监听变化
  const { onGlobalStateChange, setGlobalState } = props;
  
  onGlobalStateChange((state, prev) => {
    console.log('子应用观察到状态变化：', state, prev);
  });
  
  // 更新状态
  setGlobalState({ user: { name: 'Li Si' } });
}

3. Micro-App 框架详解

3.1 Micro-App 简介

Micro-App 是由京东零售推出的一款基于 Web Components 的微前端框架，它使用自定义元素（Custom Elements）的方式实现微前端，简化了微前端的开发和使用。

3.2 Micro-App 的核心特性

基于 Web Components，使用自定义元素的方式引入子应用
简单易用，使用方式接近 iframe
技术栈无关，兼容多种框架
支持预加载、资源复用和沙箱隔离
无需改造既有应用，对子应用侵入性小

3.3 Micro-App 的基本使用

3.3.1 安装依赖

bash 复制代码

npm i @micro-zoe/micro-app --save

3.3.2 主应用配置（Vue 为例）

javascript 复制代码

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import microApp from '@micro-zoe/micro-app'

// 初始化 micro-app
microApp.start()

createApp(App).mount('#app')

vue 复制代码

<!-- App.vue -->
<template>
  <div>
    <h1>主应用</h1>
    <!-- 通过自定义元素的方式引入子应用 -->
    <micro-app 
      name="vue-app" 
      url="http://localhost:8080/" 
      baseroute="/vue-app">
    </micro-app>
  </div>
</template>

3.3.3 子应用配置（Vue 为例）

对于子应用，Micro-App 框架对子应用的侵入性很小，只需在子应用的入口文件中导出相应生命周期函数即可：

javascript 复制代码

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

let app = null
let history = null

// 将生命周期函数挂载到 window 上
window[`micro-app-vue-app`] = {
  bootstrap() {
    console.log('vue app bootstraped')
  },
  mount(props) {
    console.log('vue app mount with props:', props)
    app = createApp(App)
    app.use(router)
    app.mount('#app')
  },
  unmount() {
    console.log('vue app unmount')
    app.unmount()
    app = null
    history = null
  }
}

3.4 Micro-App 的通信机制

3.4.1 基于 Data 属性通信

vue 复制代码

<!-- 主应用 -->
<template>
  <micro-app 
    name="vue-app" 
    url="http://localhost:8080/" 
    :data="data">
  </micro-app>
</template>

<script>
export default {
  data() {
    return {
      data: { msg: 'hello from main app' }
    }
  },
  methods: {
    changeData() {
      this.data = { msg: 'data changed' }
    }
  }
}
</script>

javascript 复制代码

// 子应用中获取数据
import microApp from '@micro-zoe/micro-app'

// 获取主应用传递的数据
const data = microApp.getData()
console.log(data) // { msg: 'hello from main app' }

// 监听数据变化
window.addEventListener('datachange', (e) => {
  console.log('数据已更新：', e.detail.data)
})

3.4.2 发布订阅通信

javascript 复制代码

// 主应用
import microApp from '@micro-zoe/micro-app'

// 向子应用发送数据
microApp.dispatch({ name: 'vue-app' }, { type: 'global-data', data: { value: 'hello' } })

// 监听子应用发送的数据
microApp.addDataListener('vue-app', (data) => {
  console.log('来自子应用的数据：', data)
})

// 子应用
import microApp from '@micro-zoe/micro-app'

// 向主应用发送数据
microApp.dispatch({ type: 'from-child', data: 'some data' })

// 监听主应用发送的数据
window.addEventListener('global-data', (e) => {
  console.log('来自主应用的数据：', e.detail.data)
})

4. qiankun 与 Micro-App 的对比分析

4.1 技术实现方式对比

微前端框架对比 qiankun Micro-App 基于 single-spa 基于 Web Components JavaScript 代理沙箱 Shadow DOM 隔离

4.2 功能特性对比

特性	qiankun	Micro-App
技术实现	基于 single-spa	基于 Web Components
使用方式	API 调用	自定义标签
子应用改造	中等	较少
沙箱隔离	JavaScript 沙箱	Shadow DOM
样式隔离	严格模式/实验性	Shadow DOM 隔离
子应用预加载	支持	支持
通信方式	Props、全局状态	Data属性、发布订阅
社区活跃度	高	中等

4.3 适用场景分析

4.3.1 qiankun 适用场景

大型企业级应用迁移和重构
需要完整微前端解决方案的项目
对微前端概念理解较深的团队
需要严格的JS隔离和更复杂的应用间通信

4.3.2 Micro-App 适用场景

希望快速集成微前端且对子应用侵入性低的项目
喜欢声明式API的开发团队
对现有项目改造成本敏感的场景
Web Components技术栈项目

5. 微前端实践建议

5.1 微前端架构设计原则

子应用尽可能保持独立性，减少应用间耦合
明确应用边界和责任范围
统一基础设施和公共依赖管理
建立统一的用户体验规范

5.2 常见问题与解决方案

5.2.1 路由管理

javascript 复制代码

// qiankun 主应用路由配置
import { registerMicroApps } from 'qiankun';

registerMicroApps([
  {
    name: 'vue-app',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/vue-app',
  }
]);

// 子应用路由配置
const router = new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? '/vue-app' : '/',
  mode: 'history',
  routes: [...]
});

5.2.2 公共依赖共享

javascript 复制代码

// 主应用配置共享依赖
import { registerMicroApps, start } from 'qiankun';
import Vue from 'vue';
import ElementUI from 'element-ui';

// 将共享依赖挂载到全局
window.Vue = Vue;
window.ElementUI = ElementUI;

registerMicroApps([...]);
start({
  sandbox: {
    strictStyleIsolation: false,
    experimentalStyleIsolation: true,
    // 配置不需要沙箱隔离的全局变量
    patchers: [
      (globalWindow) => {
        globalWindow.Vue = window.Vue;
        globalWindow.ElementUI = window.ElementUI;
        return globalWindow;
      }
    ]
  }
});

5.3 性能优化策略

使用预加载机制提前加载子应用
合理配置子应用打包，减小体积
共享公共依赖，避免重复加载
使用缓存策略减少资源请求

javascript 复制代码

// qiankun 预加载配置
import { registerMicroApps, start, prefetchApps } from 'qiankun';

// 注册子应用
registerMicroApps([...]);

// 预加载配置
prefetchApps([
  { name: 'vue-app', entry: '//localhost:8080' },
  { name: 'react-app', entry: '//localhost:3000' }
]);

// 或在启动时配置预加载策略
start({ 
  prefetch: 'all' // 可选值: boolean | 'all' | string[] | function
});

6. 微前端的未来发展趋势

6.1 技术演进方向

Web Components 标准的完善和普及
ESM 模块的广泛应用
构建工具的进一步优化
微前端与微服务的深度融合

6.2 生态建设与标准化

mindmap root((微前端生态)) 框架层 qiankun Micro-App single-spa Module Federation 工具层构建工具开发工具调试工具规范层接口规范通信规范生命周期规范最佳实践设计模式部署策略监控方案

6.3 企业实践案例分析

大型企业在实施微前端架构时的常见策略：

渐进式迁移：先改造部分功能模块，逐步扩展
多团队协作：建立明确的团队责任边界和协作机制
统一基础设施：共享组件库、设计系统、构建工具链
持续集成部署：建立子应用独立的CI/CD流水线
监控与治理：建立微前端专项监控和治理机制

结语

感谢您的阅读！期待您的一键三连！欢迎指正！