1 qiankun
1.1 使用1
00.微前端架构概述
a.核心概念
a.主应用（Base App）
负责全局路由、状态管理和子应用调度。
b.子应用（Micro App）
独立开发、部署的业务模块，支持不同技术栈。
c.通信机制
主应用与子应用间通过 props 或全局状态共享数据。
01.环境准备
a.创建主应用
# 使用 Vite 快速创建 Vue3 项目
npm create vue@latest main-app
cd main-app
npm install qiankun -S
b.创建子应用
npm create vue@latest micro-vue-app
02.主应用配置
a.注册子应用
在 src/micro/apps.ts 中定义子应用信息
-----------------------------------------------------------------------------------------------------
// apps.ts
export default [
{
name: 'micro-vue-app',
entry: '//localhost:7101', // 子应用开发环境地址
container: '#subapp-container',
activeRule: '/micro-vue',
},
];
b.启动 Qiankun
修改 main.ts。
-----------------------------------------------------------------------------------------------------
import { createApp } from 'vue';
import { registerMicroApps, start } from 'qiankun';
import App from './App.vue';
import apps from './micro/apps';
const app = createApp(App);
// 注册子应用
registerMicroApps(apps);
// 启动 qiankun
start({
prefetch: 'all', // 预加载子应用
sandbox: { experimentalStyleIsolation: true }, // 样式隔离
});
app.mount('#main-app');
c.路由配置
修改 router/index.ts，确保主应用路由不干扰子应用。
-----------------------------------------------------------------------------------------------------
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ path: '/', component: HomeView },
{ path: '/micro-vue/*', component: () => import('@/views/MicroContainer.vue') },
],
});
03.子应用改造
a.导出生命周期钩子
在子应用入口文件 src/main.ts 中。
-----------------------------------------------------------------------------------------------------
import { createApp } from 'vue';
import App from './App.vue';
let instance: any = null;
function render(props: any) {
const { container } = props;
instance = createApp(App);
instance.mount(container?.querySelector('#app') || '#app');
}
// 独立运行时直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
render({});
}
// 导出 Qiankun 生命周期
export async function bootstrap() {
console.log('Vue子应用启动');
}
export async function mount(props: any) {
render(props);
}
export async function unmount() {
instance.unmount();
instance = null;
}
b.配置打包工具（Vite）
修改 vite.config.ts。
-----------------------------------------------------------------------------------------------------
export default defineConfig({
base: '/micro-vue', // 与主应用 activeRule 匹配
server: {
port: 7101,
cors: true,
},
build: {
rollupOptions: {
output: {
format: 'system', // 使用 SystemJS 格式
},
},
},
});
---
c.添加 publicPath 适配
在子应用根目录创建 public-path.js。
-----------------------------------------------------------------------------------------------------
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
04.主应用与子应用通信
a.主应用传递数据
注册子应用时添加 props。
-----------------------------------------------------------------------------------------------------
registerMicroApps(apps, {
beforeLoad: (app) => {
return {
...app,
props: { globalToken: '主应用传递的Token' },
};
},
});
b.子应用接收数据
在子应用 mount 生命周期中获取。
-----------------------------------------------------------------------------------------------------
export async function mount(props: any) {
console.log('接收主应用数据:', props.globalToken);
render(props);
}
05.常见问题
a.结构示例
├── main-app/ # 主应用
│ ├── src/
│ │ ├── micro/ # 微前端配置
│ │ └── views/MicroContainer.vue
├── micro-vue-app/ # Vue3子应用
│ ├── src/
│ │ └── main.ts # 导出生命周期
b.样式隔离
方案一：开启 sandbox: { experimentalStyleIsolation: true }（添加样式前缀）
方案二：使用 CSS Modules 或 Shadow DOM
c.公共依赖处理
通过 webpack 的 externals 或 Vite 的 build.rollupOptions.external 共享公共库（如 Vue3）。
d.子应用独立路由
子应用需使用 createWebHistory 并配置 base。
-----------------------------------------------------------------------------------------------------
const router = createRouter({
history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/micro-vue' : '/'),
});
1.2 使用2
01.架构设计
a.主应用（基座）
负责全局路由、权限、状态管理，以及子应用的加载
b.子应用
包括Vue2、Vue3和React16子系统，独立仓库管理
c.公共依赖管理
共享工具库和样式规范
02.实施步骤
a.搭建主应用基座
使用Vue3或纯JavaScript
配置微前端环境，注册子应用并启动
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{ name: 'vue2-app', entry: '//localhost:7101', container: '#subapp-container', activeRule: '/vue2' },
{ name: 'vue3-app', entry: '//localhost:7102', container: '#subapp-container', activeRule: '/vue3' },
{ name: 'react16-app', entry: '//localhost:7103', container: '#subapp-container', activeRule: '/react16' }
]);
start({
prefetch: 'all',
sandbox: { experimentalStyleIsolation: true }
});
b.子应用改造（以Vue2为例）
配置子应用的生命周期钩子和Webpack。
// vue2-app/src/public-path.js
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// vue2-app/src/main.js
let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
router,
store,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app');
}
export async function bootstrap() {}
export async function mount(props) { render(props); }
export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ''; instance = null; }
Webpack配置：
module.exports = {
devServer: {
headers: { 'Access-Control-Allow-Origin': '*' }
},
configureWebpack: {
output: {
library: `vue2App`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_vue2App`
}
}
};
c.解决多框架冲突
样式隔离：启用qiankun的样式沙箱，使用CSS Modules
JS沙箱：启用严格样式隔离和Shadow DOM
公共依赖处理：使用externals配置共享依赖
d.路由统一管理
主应用处理一级路由，子应用处理子路由
// main-app/src/router.js
const routes = [
{ path: '/vue2/*', name: 'vue2', meta: { title: 'Vue2子系统' } },
{ path: '/vue3/*', name: 'vue3', meta: { title: 'Vue3子系统' } },
{ path: '/react16/*', name: 'react16', meta: { title: 'React16子系统' } }
];
e.部署优化策略
独立部署：每个子应用单独构建，主应用通过Nginx配置反向代理
资源预加载：按需预加载子应用资源
性能监控：集成监控SDK，监控子应用性能