3 步接入 qiankun 微前端vite-plugin-qiankun 快速上手教程【免費(fèi)下載鏈接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子應(yīng)用項目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankunvite-plugin-qiankun 是一個讓 Vite 項目快速接入 qiankun 微前端框架的 Vite 插件。它保留了 Vite 的 es module 特性子應(yīng)用只需一行配置就能完成乾坤接入。這篇文章面向剛接觸微前端的新手帶你從零把子應(yīng)用跑起來。一個插件搞定 Vite 與 qiankun 的對接簡單說它就是Vite 子應(yīng)用和乾坤主應(yīng)用之間的翻譯官主應(yīng)用用 qiankun 來調(diào)度子應(yīng)用繼續(xù)用 Vite 開發(fā)兩邊互不遷就。子應(yīng)用代碼自動切分插件會替你處理好子應(yīng)用的分包把每個子應(yīng)用的代碼收進(jìn)獨立的 chunk 里你不用自己去折騰分割配置。公共依賴只加載一次多個子應(yīng)用共用的依賴會被打包成公共 chunk首次訪問時預(yù)加載一遍之后切換子應(yīng)用直接復(fù)用省流量也省時間。沙箱隔離互不打架每個子應(yīng)用都跑在獨立的沙箱里。同一頁面渲染多個子應(yīng)用時狀態(tài)和樣式不會串到別人頭上。三步跑起來第 1 步一條命令完成安裝把它裝到子應(yīng)用項目的開發(fā)依賴?yán)飊pm install vite-plugin-qiankun --save-dev第 2 步vite.config.ts 里這樣配給插件傳入子應(yīng)用名這個名字要和主應(yīng)用注冊時用的 AppName 保持一致// vite.config.ts import qiankun from vite-plugin-qiankun; export default { plugins: [qiankun(my-app)], // 子應(yīng)用名須與主應(yīng)用注冊一致 base: http://xxx.com/, // 生產(chǎn)環(huán)境指定運(yùn)行域名 };開發(fā)環(huán)境想當(dāng)獨立頁面調(diào)試時base保持默認(rèn)即可不用額外改動已有的 Vite 配置。第 3 步在入口文件里聲明子應(yīng)用生命周期借助插件自帶的 helper把乾坤要求的生命周期掛載到全局同時保留獨立運(yùn)行的能力// main.ts import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helper; renderWithQiankun({ bootstrap() { /* 初始化邏輯 */ }, mount(props) { render(props); }, unmount(props) { /* 卸載邏輯 */ }, }); if (!qiankunWindow.__POWERED_BY_QIANKUN__) { render({}); // 沒跑在 qiankun 里就自行掛載 }到這里子應(yīng)用既能在主應(yīng)用里被調(diào)度也能單獨打開頁面自測。避坑與技巧4 個讓接入更順手的細(xì)節(jié) ??子應(yīng)用各自獨立部署讓每個子應(yīng)用擁有獨立倉庫和獨立構(gòu)建流程發(fā)版互不牽連主應(yīng)用升級不用等子應(yīng)用排隊。公共依賴統(tǒng)一管理真正被多個子應(yīng)用共享的庫如 React 運(yùn)行時抽出來只加載一次避免每個子應(yīng)用各拉一份。謹(jǐn)慎往 window 上掛東西由于 es module 的加載方式子應(yīng)用代碼并不在 qiankun 的 JS 沙盒內(nèi)運(yùn)行。需要寫全局屬性時用 helper 導(dǎo)出的qiankunWindow顯式操作別直接動window否則可能污染其他子應(yīng)用。開發(fā)模式下熱更新要讓路開啟useDevMode讓子應(yīng)用在開發(fā)環(huán)境被主應(yīng)用加載時會和熱更新插件以及其它改寫 html 的插件沖突二者只能取其一用一個開關(guān)變量切換最省心。相關(guān)實現(xiàn)可看 src/index.ts。周邊生態(tài)一眼看qiankun基于 single-spa 的微前端框架主應(yīng)用用它注冊、調(diào)度和卸載各個子應(yīng)用。Vite基于 ES 模塊的構(gòu)建工具秒級熱更新的開發(fā)體驗子應(yīng)用用它寫代碼。Vue3常用的子應(yīng)用技術(shù)棧項目里就有現(xiàn)成示例見 example/vue3sub。React另一主流選擇example/react18 演示了 React 18 子應(yīng)用的接法。主應(yīng)用側(cè)的完整注冊寫法可以參考 example/main/index.js里面演示了registerMicroApps和start的標(biāo)準(zhǔn)用法。一句話總結(jié)vite-plugin-qiankun 讓 Vite 項目用裝插件、配名字、寫生命周期三步變成合格的 qiankun 微前端子應(yīng)用接入成本幾乎可以忽略。更多內(nèi)容請查閱 官方 readme動手試錯才是最快的學(xué)習(xí)方式。【免費(fèi)下載鏈接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子應(yīng)用項目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考