从落地到“半停用“：qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思

《从落地到“半停用“：qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思》这篇在博客园热度很高，讲的正是大家天天碰到的事。下面帮你把要点捋出来，结尾有能直接抄的结论。

从落地到"半停用"：qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思 本文基于一个真实企业项目——某工业监测管理平台（已对业务信息做脱敏处理）的微前端改造实践整理而成。系统由管理后台（admin）与大屏展示端（client）两个独立 Vue 3 应用组成，曾用 qiankun 集成，后转为独立部署。这篇文章既讲"怎么接的"，也讲"为什么后来不用了"，希望能给正在选型微前端的团队一些参考。 一、项目背景 系统包含两个独立前端应用： 应用 定位 技术栈 admin 管理后台主应用，基于 JeecgBoot Vue3 二次开发 Vue 3.4 + TypeScript + Vite 5 + Ant Design Vue 4 + Pinia client 大屏展示应用 Vue 3.2 + JavaScript + Vite 4 + Three.js / 地图 SDK / ECharts 两个应用由不同时期、不同风格的团队开发：admin 是标准的中后台技术栈，client 则是重渲染、重 WebSocket、全屏运行的大屏应用。

从落地到"半停用"：qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思 本文基于一个真实企业项目——某工业监测管理平台（已对业务信息做脱敏处理）的微前端改造实践整理而成。系统由管理后台（admin）与大屏展示端（client）两个独立 Vue 3 应用组成，曾用 qiankun 集成，后转为独立部署。这篇文章既讲"怎么接的"，也讲"为什么后来不用了"，希望能给正在选型微前端的团队一些参考。 一、项目背景 系统包含两个独立前端应用： 应用 定位 技术栈 admin 管理后台主应用，基于 JeecgBoot Vue3 二次开发 Vue 3.4 + TypeScript + Vite 5 + Ant Design Vue 4 + Pinia client 大屏展示应用 Vue 3.2 + JavaScript + Vite 4 + Three.js / 地图 SDK / ECharts 两个应用由不同时期、不同风格的团队开发：admin 是标准的中后台技术栈，client 则是重渲染、重 WebSocket、全屏运行的大屏应用。 最初的诉求很典型： 用户在 admin 里点一个菜单，希望能 无刷新 进入大屏，而不是跳到一个新站点； 登录态（token）要共享，不能让用户再登一次； 两个应用保持独立仓库目录、独立构建部署节奏。

从落地到"半停用"：qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思 本文基于一个真实企业项目——某工业监测管理平台（已对业务信息做脱敏处理）的微前端改造实践整理而成。系统由管理后台（admin）与大屏展示端（client）两个独立 Vue 3 应用组成，曾用 qiankun 集成，后转为独立部署。这篇文章既讲"怎么接的"，也讲"为什么后来不用了"，希望能给正在选型微前端的团队一些参考。 一、项目背景 系统包含两个独立前端应用： 应用 定位 技术栈 admin 管理后台主应用，基于 JeecgBoot Vue3 二次开发 Vue 3.4 + TypeScript + Vite 5 + Ant Design Vue 4 + Pinia client 大屏展示应用 Vue 3.2 + JavaScript + Vite 4 + Three.js / 地图 SDK / ECharts 两个应用由不同时期、不同风格的团队开发：admin 是标准的中后台技术栈，client 则是重渲染、重 WebSocket、全屏运行的大屏应用。 最初的诉求很典型： 用户在 admin 里点一个菜单，希望能 无刷新 进入大屏，而不是跳到一个新站点； 登录态（token）要共享，不能让用户再登一次； 两个应用保持独立仓库目录、独立构建部署节奏。 于是自然想到了 qiankun——国内最主流的微前端框架，基于 single-spa，通过 HTML Entry + JS 沙箱实现子应用接入，对技术栈几乎无侵入。

从落地到"半停用"：qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思 本文基于一个真实企业项目——某工业监测管理平台（已对业务信息做脱敏处理）的微前端改造实践整理而成。系统由管理后台（admin）与大屏展示端（client）两个独立 Vue 3 应用组成，曾用 qiankun 集成，后转为独立部署。这篇文章既讲"怎么接的"，也讲"为什么后来不用了"，希望能给正在选型微前端的团队一些参考。 一、项目背景 系统包含两个独立前端应用： 应用 定位 技术栈 admin 管理后台主应用，基于 JeecgBoot Vue3 二次开发 Vue 3.4 + TypeScript + Vite 5 + Ant Design Vue 4 + Pinia client 大屏展示应用 Vue 3.2 + JavaScript + Vite 4 + Three.js / 地图 SDK / ECharts 两个应用由不同时期、不同风格的团队开发：admin 是标准的中后台技术栈，client 则是重渲染、重 WebSocket、全屏运行的大屏应用。 最初的诉求很典型： 用户在 admin 里点一个菜单，希望能 无刷新 进入大屏，而不是跳到一个新站点； 登录态（token）要共享，不能让用户再登一次； 两个应用保持独立仓库目录、独立构建部署节奏。 于是自然想到了 qiankun——国内最主流的微前端框架，基于 single-spa，通过 HTML Entry + JS 沙箱实现子应用接入，对技术栈几乎无侵入。 二、主应用侧的实现 2.1 环境变量驱动的微应用注册清单 qiankun 的第一步是 registerMicroApps 。

从落地到"半停用"：qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思 本文基于一个真实企业项目——某工业监测管理平台（已对业务信息做脱敏处理）的微前端改造实践整理而成。系统由管理后台（admin）与大屏展示端（client）两个独立 Vue 3 应用组成，曾用 qiankun 集成，后转为独立部署。这篇文章既讲"怎么接的"，也讲"为什么后来不用了"，希望能给正在选型微前端的团队一些参考。 一、项目背景 系统包含两个独立前端应用： 应用 定位 技术栈 admin 管理后台主应用，基于 JeecgBoot Vue3 二次开发 Vue 3.4 + TypeScript + Vite 5 + Ant Design Vue 4 + Pinia client 大屏展示应用 Vue 3.2 + JavaScript + Vite 4 + Three.js / 地图 SDK / ECharts 两个应用由不同时期、不同风格的团队开发：admin 是标准的中后台技术栈，client 则是重渲染、重 WebSocket、全屏运行的大屏应用。 最初的诉求很典型： 用户在 admin 里点一个菜单，希望能 无刷新 进入大屏，而不是跳到一个新站点； 登录态（token）要共享，不能让用户再登一次； 两个应用保持独立仓库目录、独立构建部署节奏。 于是自然想到了 qiankun——国内最主流的微前端框架，基于 single-spa，通过 HTML Entry + JS 沙箱实现子应用接入，对技术栈几乎无侵入。 二、主应用侧的实现 2.1 环境变量驱动的微应用注册清单 qiankun 的第一步是 registerMicroApps 。我们没有把子应用列表硬编码，而是约定了一个环境变量前缀 VITE_APP_SUB_ ，启动时动态扫描生成注册清单： [代码示例略] 对应的 .env.development ： [代码示例略] 这样做的好处： 新增子应用零代码改动 ——加一行环境变量即可； 环境隔离天然成立 ——开发指向 //localhost:3010 ，生产指向部署域名； name 同时充当 activeRule ，约定"子应用名即路由前缀"，即访问 /client/** 时激活 client 子应用。

最后提醒：每个人的环境不一样，照抄之前先小步验证。有了自己的验证结果，这篇的价值才真正归你。你怎么看？ 来源｜博客园《从落地到“半停用“：qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思》，https://www.cnblogs.com/ChineseLiao/p/22963519.html