前言当你的 Vue 项目发展到一定规模通常会遇到这些问题 项目越来越大构建越来越慢 多个团队协作频繁冲突 老项目不敢动新需求不断来 技术栈升级牵一发而动全身这时候你需要的不只是“组件拆分”而是架构级别的拆分微前端Micro Frontends微前端的核心思想是将一个大应用拆成多个独立交付的小应用再聚合为一个整体。在国内qiankun基于 Single-SPA​ 是微前端的事实标准。这一篇我们系统讲解Vue3 如何优雅地接入 qiankun。一、微前端核心概念1️⃣ 什么是微前端┌─────────────────────────────────────┐ │ 主应用Shell │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐│ │ │ 子应用A │ │ 子应用B │ │ 子应用C ││ │ │ (Vue3) │ │ (React) │ │ (Vue2) ││ │ └─────────┘ └─────────┘ └─────────┘│ └─────────────────────────────────────┘2️⃣ 微前端的五大能力能力说明独立开发子应用可独立开发、测试、部署技术栈无关Vue / React / Angular 并存增量升级老项目逐步迁移独立运行时各应用互不影响统一入口用户感知为一个系统二、qiankun 架构原理简要1️⃣ 核心机制机制作用注册应用告诉主应用有哪些子应用加载应用通过 fetch 加载子应用资源JS 沙箱隔离全局变量样式隔离防止 CSS 污染应用通信主 / 子应用数据共享2️⃣ 生命周期load → bootstrap → mount → update → unmount三、主应用Vue3搭建1️⃣ 安装依赖pnpm add qiankun2️⃣ 注册子应用// src/qiankun/index.ts import { registerMicroApps, start } from qiankun registerMicroApps([ { name: vue3-app, entry: //localhost:7101, container: #subapp-container, activeRule: /vue3, props: { token: main-app-token } }, { name: react-app, entry: //localhost:7102, container: #subapp-container, activeRule: /react } ]) start({ sandbox: { experimentalStyleIsolation: true // 样式隔离 } })3️⃣ 在主应用中挂载!-- App.vue -- template div idapp nav router-link to/vue3Vue3 子应用/router-link router-link to/reactReact 子应用/router-link /nav div idsubapp-container/div /div /template script setup import ./qiankun /script四、Vue3 子应用改造重点1️⃣ 安装依赖pnpm add vite-plugin-qiankun2️⃣ Vite 配置// vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue import qiankun from vite-plugin-qiankun export default defineConfig({ plugins: [ vue(), qiankun(vue3-app, { useDevMode: true }) ], server: { port: 7101, cors: true } })3️⃣ 入口文件改造// src/main.ts import { createApp } from vue import App from ./App.vue import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helper let app: any null function render(props: any {}) { const { container } props app createApp(App) app.mount(container ? container.querySelector(#app)! : #app) } // 独立运行时 if (!qiankunWindow.__POWERED_BY_QIANKUN__) { render() } // qiankun 生命周期 renderWithQiankun({ mount(props) { render(props) }, bootstrap() { console.log(vue3-app bootstrap) }, unmount() { app?.unmount() }, update(props) { console.log(vue3-app update, props) } })4️⃣ 路由配置关键// src/router/index.ts import { createRouter, createWebHistory } from vue-router const router createRouter({ // 子应用必须用绝对路径 history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? /vue3 : /), routes: [ { path: /, component: () import(/views/Home.vue) } ] }) export default router五、样式隔离方案1️⃣ qiankun 内置样式隔离start({ sandbox: { experimentalStyleIsolation: true } })原理给子应用所有样式选择器添加前缀/* 原样式 */ .app { color: red; } /* 转换后 */ div[data-qiankunvue3-app] .app { color: red; }2️⃣ Scoped CSS推荐style scoped .app { color: red; } /style3️⃣ CSS Modulesstyle module .app { color: red; } /style六、应用间通信1️⃣ 基于 props推荐 ✅// 主应用 registerMicroApps([ { name: vue3-app, entry: //localhost:7101, container: #subapp-container, activeRule: /vue3, props: { token: xxx, user: { name: Tom } } } ])// 子应用 mount(props) { console.log(props.token) render(props) }2️⃣ 全局状态initGlobalState// 主应用 import { initGlobalState } from qiankun const actions initGlobalState({ user: null }) actions.onGlobalStateChange((state, prev) { console.log(变化前:, prev) console.log(变化后:, state) }) actions.setGlobalState({ user: { name: Tom } })// 子应用 import { qiankunWindow } from vite-plugin-qiankun/dist/helper qiankunWindow.__INJECTED_PUBLIC_ACTIONS__.onGlobalStateChange((state) { console.log(state) })3️⃣ 共享库Shared Libraries// 主应用提供 start({ excludeAssetFilter: (url) url.includes(vue) }) // 子应用 externals // vite.config.ts export default defineConfig({ build: { rollupOptions: { external: [vue, vue-router] } } })七、常见问题与解决方案❌ 问题 1子应用刷新 404原因主应用路由和子应用路由冲突解决主应用用 hash 模式或 Nginx 配置 fallback❌ 问题 2Vue DevTools 不显示原因子应用在沙箱中运行解决独立运行时使用 DevTools或使用window.__VUE_DEVTOOLS_GLOBAL_HOOK__❌ 问题 3全局变量污染解决确保子应用有完整的生命周期卸载逻辑unmount() { app?.unmount() app null }八、微前端最佳实践场景建议新项目优先考虑微前端老项目渐进式迁移技术栈尽量统一通信props 全局状态部署独立部署CDN 加速监控统一日志、错误监控九、面试高频问答Q1qiankun 如何实现 JS 隔离通过 Proxy 沙箱拦截全局变量的读写。Q2微前端和 iframe 的区别iframe 强隔离但性能差、通信难微前端弱隔离但性能好、体验佳。Q3什么时候不该用微前端小型项目、团队规模小、技术栈单一时。十、总结架构级微前端是大型系统的解耦方案qiankun 是目前最成熟的微前端框架Vue3 接入关键是生命周期对接样式隔离和通信是两大难点不要为了微前端而微前端 下期预告第 29 篇单元测试与 E2E 测试 —— 保障 Vue3 项目的质量