vue-vben-admin 集成 qiankun 微前端快速指南三步跑通主子應用通信與樣式隔離【免費下載鏈接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!項目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin三個團隊共用一個管理后臺倉庫發(fā)版互相排隊改個按鈕顏色要整站回歸。用 qiankun 微前端把 vue-vben-admin 的 apps/ 拆成基座加子應用每個模塊獨立部署部署互不阻塞。這份指南走完你能拿到一套可直接上生產(chǎn)的 vue-vben-admin 集成方案。先判斷哪些場景值得拆發(fā)版節(jié)奏互相卡業(yè)務線各自維護包合一次主干就要一起回歸拆開各自發(fā)版。技術?；旌霞扔?Vue 也有 React 老頁面qiankun 不強求同框架按入口注冊即可。權限邊界清晰不同模塊登錄態(tài)、接口域不同拆開后每個微應用獨立管自己的守衛(wèi)。反過來單團隊維護、強交互的模塊共享狀態(tài)、跨模塊拖拽不建議拆拆完通信成本和首屏開銷都會上來不如模塊化組織。動手前的環(huán)境與目錄規(guī)劃環(huán)境要求 Node.js 和 pnpmmonorepo 由 pnpm-workspace.yaml 管理構建用 turbo 串聯(lián)。主應用選 apps/web-ele第一個微應用選 apps/web-antd。改動集中在三處基座應用的main.ts、微應用的 apps/web-antd/src/bootstrap.ts 和 apps/web-antd/vite.config.ts。公共包 packages/ 基本不用動先把這三處想清楚再寫代碼。三步跑通 qiankun 主子應用第 1 步裝依賴。在根目錄執(zhí)行pnpm add qiankun -F vben/web-ele第 2 步基座注冊微應用。在基座main.ts的現(xiàn)有初始化之后追加import { registerMicroApps, start } from qiankun; // 容器 div 要提前寫在 index.html 里 registerMicroApps([ { name: web-antd, entry: //localhost:5666, container: #micro-app-container, activeRule: /web-antd, }, ]); start({ sandbox: { experimentalStyleIsolation: true } });activeRule的前綴要和微應用自己的 base 對上這是后面路由不 404 的關鍵。第 3 步微應用暴露生命周期。現(xiàn)在的 apps/web-antd/src/bootstrap.ts 里bootstrap直接app.mount(#app)且不保存實例改造兩點讓掛載邏輯可重復執(zhí)行并在 apps/web-antd/src/main.ts 里掛 qiankun 生命周期// main.ts 追加 let app: App | null null; export async function mount(props) { app await createVbenApp(props); // 原 bootstrap 邏輯改造為可復用 app.mount(#app); } export async function unmount() { app?.unmount(); app null; } if (!window.__POWERED_BY_QIANKUN__) { bootstrap(); // 獨立運行時行為不變 }第 4 步收尾構建配置。在 apps/web-antd/vite.config.ts 里補三樣// vite.config.ts 的 vite 字段內 server: { cors: true, // 跨域加載必需 headers: { Cross-Origin-Opener-Policy: same-origin }, }, base: /web-antd/, // 與 activeRule 前綴對齊VITE_PORT在 .env 里改一下dev 和 build 就都通了。qiankun 主子應用通信的三種姿勢Props 傳值。qiankun 把注冊時的props原樣交給mount回調最常用的場景是登錄態(tài)// 基座注冊時 props: { token: getToken(), user: getUserInfo() }, // 微應用 mount 內 mount(({ token, user }) { useAuthStore().setToken(token); // 跳過自己的登錄頁 });微應用拿到 token 直接跳過鑒權兩邊不再各自維護一套登錄邏輯。動態(tài)狀態(tài)同步。租戶、主題這類會變的全局值用 qiankun 的initGlobalState開一條獨立通道微應用端onGlobalStateChange訂閱基座一處改、各端跟著刷新。樣式隔離。qiankun 默認給容器下所有 DOM 加屬性選擇器前綴vben 的 Tailwind 全局規(guī)則就不會串到別的應用。注意 Antd 彈層會被 teleport 到 body 外作用域前綴罩不住彈層樣式用樣式前綴less 的 modifyVars補位。另外主應用里的容器 div 要有顯式高度微應用根節(jié)點用min-h-screen撐滿。qiankun 集成高頻坑的排查路徑白屏控制臺報 CORS 拒絕原因基座從 dev server fetch 微應用入口開發(fā)服務器默認沒有跨域頭。 處理微應用 vite 配置server.cors: true第 4 步已加生產(chǎn)環(huán)境主子應用放同域反代到不同路徑即可。activeRule 前綴重疊兩個微應用同時激活原因activeRule 是前綴匹配/web和/web-antd會同時命中。 處理給每個微應用分配唯一前綴注冊順序也按從長到短排。strictStyleIsolation 一開Antd 彈層樣式全丟原因strict 模式啟用 shadow DOM被 teleport 到 body 的彈層直接失去全部樣式。 處理保持experimentalStyleIsolation彈層樣式用作用域前綴解決別上 strict。重復的 loading 和 PWA 提示原因vben 默認注入全局 loading 和 PWA 注冊嵌入基座后這些基座才需要的功能重復出現(xiàn)。 處理微應用.env里VITE_INJECT_APP_LOADINGfalse、VITE_PWAfalse保持微應用最小。下一步到這里主子應用已經(jīng)跑通登錄態(tài)和樣式也收斂了。生產(chǎn)部署建議同域nginx 把微應用靜態(tài)資源反代到各自路徑登錄態(tài)統(tǒng)一走 props 加 initGlobalState路由和 base 的策略細節(jié)可以直接讀 docs/guide/essentials/route.md 對照你的部署結構調。【免費下載鏈接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!項目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考