Vite 項目怎么跑進 qiankun 微前端vite-plugin-qiankun 快速上手指南【免費下載鏈接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子應用項目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun乾坤是主流的微前端框架能把多個獨立部署的子應用放進同一頁面但它的示例大多基于 webpack 構建Vite 項目接入時常卡住。vite-plugin-qiankun 是專門針對這個場景的 Vite 插件讓 Vite 子應用一行配置接入乾坤全程保留 Vite 構建的 ESM瀏覽器原生的 ES 模塊特性不動你已有的 Vite 配置。下面以一個 Vite 子應用為例把接入走一遍。為什么 Vite 項目接入乾坤會卡住qiankun 加載子應用時要求子應用暴露 bootstrap、mount、unmount 三個生命周期。常規做法是把子應用用 webpack 打成單文件 bundle 再手寫注入腳本等于放棄 Vite 的構建優勢。這個插件的意義在于你不用動現有構建鏈路加上插件后 Vite 依舊輸出 ESM 模塊它自帶開發模式開發時子應用能被主應用直接加載調試代價只有一個ESM 加載不走乾坤的 JS 沙箱寫 window 時要顯式使用插件提供的 qiankunWindow 對象避免污染其它子應用。 三步做出一個 Vite 子應用第一步安裝插件作為開發依賴添加npm install vite-plugin-qiankun --save-dev第二步在 vite.config.ts 里注冊子應用名要和主應用注冊時一致生產環境把 base 指到子應用部署的域名// vite.config.ts import qiankun from vite-plugin-qiankun; export default { plugins: [qiankun(myMicroAppName)], base: http://xxx.com/, };第三步在入口文件里聲明乾坤生命周期用 renderWithQiankun 注冊三個生命周期獨立運行時照常渲染即可// main.ts import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helper; renderWithQiankun({ bootstrap() {}, mount(props) { render(props); }, unmount(props) { const root props.container?.querySelector(#root); ReactDOM.unmountComponentAtNode(root || document.querySelector(#root)); }, }); if (!qiankunWindow.__POWERED_BY_QIANKUN__) render({});開發環境要作為子應用調試時給插件傳第二個參數qiankun(myMicroAppName, { useDevMode: true })。開啟后它會和熱更新插件沖突建議用配置變量切換調試子應用時關閉熱更新。 兩個真實場景新子應用接入、獨立內嵌雙模式最典型的情況是存量 qiankun 體系要新接一個 Vite 子應用主應用可能還是 webpack子應用用 Vite 享受快速冷啟動獨立開發構建后部署到指定域名主應用注冊名稱和入口地址就能加載兩套技術棧互不牽連。另一個是日常雙模式開發子應用在瀏覽器里單獨打開就能獨立調試被主應用內嵌時走 mount/unmount 生命周期用 qiankunWindow.POWERED_BY_QIANKUN一行代碼區分不用維護兩份入口。周邊伙伴主應用、Vite 與示例工程qiankun 負責主應用一側的注冊、加載與沙箱本插件只解決“讓 Vite 的構建產物被正確加載”這件事。插件對 vite ≥ 2、typescript ≥ 4 聲明了 peer 依賴和現有配置共存不會鎖版本。倉庫 example/ 目錄下有一個主應用加多個子應用React 18、Vue、Vue3的可運行示例跟著 package.json 里的腳本就能跑通全流程。把一個 Vite 項目接進 qiankun真正要做的就是上面三步配置加生命周期更多細節可以查看倉庫 README 與 example/ 下的示例工程。【免費下載鏈接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子應用項目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考