從落地到“半停用“：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