微前端 qiankun 详细介绍及在vue上的使用指南网站首页 技术杂谈

微前端 qiankun 详细介绍及在vue上的使用指南

易小煜码胡 2026-02-02 12:01:02

简介微前端 qiankun 详细介绍及在vue上的使用指南

一、微前端简介

微前端是一种将大型前端应用拆分为多个独立模块的架构模式，每个模块可由不同团队独立开发、部署和维护。qiankun 是基于 single-spa 的微前端框架，旨在简化微前端的实现。

二、qiankun 核心概念

主应用 (Master Application)：负责加载和管理子应用，通常提供公共依赖和布局。

子应用 (Micro Application)：独立开发、部署的前端应用，可独立运行或嵌入主应用。

沙箱 (Sandbox)：隔离子应用的运行环境，防止冲突。

通信机制 (Communication Mechanism)：主应用与子应用之间的通信方式。

三、qiankun 的优势

技术栈无关：支持多种前端框架（React、Vue、Angular 等）。

独立开发部署：子应用可独立开发和部署。

样式隔离：通过沙箱机制避免样式冲突。

JS 隔离：防止全局变量污染。

资源预加载：提升子应用加载速度。

通信简单：提供 `initGlobalState` 方法实现主应用与子应用通信。

四、qiankun 使用步骤

项目结构

我们将创建一个主应用和两个子应用，目录结构如下：

qiankun-demo/
├── main-app/ # 主应用
│ ├── src/
│ │ ├── views/ # 主应用页面
│ │ ├── App.vue # 主应用根组件
│ │ └── main.js # 主应用入口文件
│ ├── package.json
│ └── vue.config.js # Vue 配置文件
├── sub-app1/ # 子应用1
│ ├── src/
│ │ ├── views/ # 子应用1页面
│ │ ├── App.vue # 子应用1根组件
│ │ └── main.js # 子应用1入口文件
│ ├── package.json
│ └── vue.config.js # Vue 配置文件
└── sub-app2/ # 子应用2
├── src/
│ ├── views/ # 子应用2页面
│ ├── App.vue # 子应用2根组件
│ └── main.js # 子应用2入口文件
├── package.json
└── vue.config.js # Vue 配置文件

主应用配置

1 安装依赖

在主应用中安装 `qiankun`：

cd main-app
npm install qiankun --save

2 配置主应用入口文件

在 `main-app/src/main.js` 中配置 Qiankun：

import Vue from 'vue'
import App from './App.vue'
import { registerMicroApps, start, initGlobalState } from 'qiankun'

Vue.config.productionTip = false

// 初始化全局状态
const actions = initGlobalState({
message: 'Hello from main app',
});

// 监听子应用的状态变化
actions.onGlobalStateChange((state, prevState) => {
console.log('主应用收到子应用的状态变化:', state);
});

new Vue({
render: h => h(App),
}).$mount('#app')

// 注册子应用
registerMicroApps([
{
name: 'sub-app1', // 子应用名称
entry: '//localhost:8081', // 子应用入口
container: '#subapp-viewport', // 子应用挂载的容器
activeRule: '/sub-app1', // 子应用激活规则

props: {
// 传递给子应用的 props
globalState: actions.getGlobalState(),
setGlobalState: actions.setGlobalState,
},
},
{
name: 'sub-app2',
entry: '//localhost:8082',
container: '#subapp-viewport',
activeRule: '/sub-app2',

props: {
// 传递给子应用的 props
globalState: actions.getGlobalState(),
setGlobalState: actions.setGlobalState,
},
}
])

// 启动 qiankun
start()

3 配置主应用路由

在 `main-app/src/App.vue` 中配置路由：

<template>
<div id="app">
<router-link to="/sub-app1">子应用1</router-link>
<router-link to="/sub-app2">子应用2</router-link>
<div id="subapp-viewport"></div>
</div>
</template>

<script>
export default {
name: 'App',

methods: {
sendMessageToSubApp() {
// 通过全局状态发送消息给子应用
this.$qiankun.setGlobalState({
message: 'Hello from main app',
});
},
},
}
</script>

子应用配置

1 子应用1配置

在 `sub-app1/src/main.js` 中配置子应用：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

let instance = null

function render(props = {}) {
const { container, globalState, setGlobalState } = props
instance = new Vue({
router,
render: h => h(App, {
props: {
globalState,
setGlobalState,
},
}),
}).$mount(container ? container.querySelector('#app') : '#app')
}

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

// 暴露子应用生命周期钩子
export async function bootstrap() {
console.log('[sub-app1] bootstraped')
}

export async function mount(props) {
console.log('[sub-app1] mount', props)
render(props)
}

export async function unmount() {
console.log('[sub-app1] unmount')
instance.$destroy()
instance = null
}

子应用组件 (`App.vue`)：

<template>
<div id="sub-app1">
<h1>子应用</h1>
<p>收到主应用的消息: {{ globalState.message }}</p>
<button @click="sendMessageToMainApp">发送消息给主应用</button>
</div>
</template>

<script>
export default {
props: {
globalState: {
type: Object,
default: () => ({}),
},
setGlobalState: {
type: Function,
default: () => {},
},
},
methods: {
sendMessageToMainApp() {
// 通过全局状态发送消息给主应用
this.setGlobalState({
message: 'Hello from sub app',
});
},
},
};
</script>

在 `sub-app1/vue.config.js` 中配置子应用：

module.exports = {
devServer: {
port: 8081,
headers: {
'Access-Control-Allow-Origin': '*'
}
},
configureWebpack: {
output: {
library: 'sub-app1',
libraryTarget: 'umd'
}
}
}

2 子应用2配置

子应用2的配置与子应用1类似，只需将端口号改为 `8082`，并将 `sub-app1` 改为 `sub-app2`。