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