vite-plugin-qiankun 上手教程：三步让 Vite 项目跑成乾坤子应用

vite-plugin-qiankun 上手教程三步让 Vite 项目跑成乾坤子应用【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankunvite-plugin-qiankun 是一个 Vite 插件它让 Vite 构建的应用能以 qiankun 子应用的身份被加载同时完整保留 Vite 原生的 ESM 输出不用为了接入微前端而改造构建配置。什么情况下你会需要它主应用用了 qiankun要求子应用在window上按应用名暴露生命周期函数而 Vite 产出的是 ES Modulewindow[myApp]根本不存在或者你被迫把构建输出改成 UMD 才能被 qiankun 加载丢掉了 Vite 的开发体验你希望不改动现有vite.config.ts太多几分钟内完成接入一句话定位它是Vite 子应用与乾坤主应用之间的翻译器。它替你解决了哪些问题自动改写 HTML把生命周期架给乾坤插件在构建或启动服务时会重写 index.html把script typemodule换成动态import()再追加一段脚本把 bootstrap、mount、unmount、update 注册到window上你的应用名下。可以理解为预留了一个提货点——qiankun 先拿到全局生命周期函数等 ESM 代码加载完成后再通过 Promise 把真正的执行逻辑交出去。现有 Vite 配置基本不用动plugins数组里加一行qiankun(应用名)即可不涉及 rollup 输出格式、分包等配置的改动原有的 TypeScript 等插件照常工作。Vite 开发服务器也能直接当子应用加载通过useDevMode选项子应用可以不经过构建、直接从 dev server 被主应用加载方便调试。代价是这期间要关掉热更新后文会讲。三步完成最小可用配置第 1 步安装npm install sh-winter/vite-plugin-qiankun --save-dev第 2 步在 vite.config 中注册import qiankun from vite-plugin-qiankun; export default { plugins: [qiankun(myMicroAppName)], // 名字须与主应用注册时一致 base: http://your-domain.com/ };第 3 步在入口声明生命周期import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helper; renderWithQiankun({ bootstrap() {}, mount(props) { render(props); }, unmount(props) { unmountApp(props); }, }); if (!qiankunWindow.__POWERED_BY_QIANKUN__) { render({}); // 独立运行时照常渲染 }unmount里记得真正卸载组件如ReactDOM.unmountComponentAtNode否则子应用反复切换会越积越卡。之后在主应用里照常调用registerMicroApps填入 name、entry、container、activeRule浏览器访问对应路径就能看到子应用渲染出来。仓库example/目录里有完整可运行的 demo一个 webpack 构建的主应用加 React、Vue2、Vue3 等四个子应用执行npm run example:install安装依赖再跑npm run example:start构建产物模式或npm run example:start-vite-devVite 开发服务器模式即可并行启动全部应用。进阶配置与高频踩坑点生产环境的 base 与资源路径base决定所有资源的 URL 前缀。动态注入的import()依赖它定位子应用资源若与主应用实际加载子应用的域名不一致脚本会直接加载失败。仓库示例的做法是构建产物模式下 base 设为完整域名如http://127.0.0.1:7106/开发模式设为/你可参照 example/viteapp/vite.config.ts 的写法。useDevMode 与热更新的冲突开发环境直接加载 dev server 作为子应用时会与热更新插件以及其它会改 HTML 的插件如 React refresh冲突。推荐用变量切换这也是示例项目的做法const useDevMode true; // true作为子应用调试不加刷新插件 // false保留热更新但本应用不能被当作子应用加载注意你的代码不在 JS 沙箱里由于 ESM 加载方式与 qiankun 沙箱机制存在冲突用本插件接入的子应用不运行在 JS 沙箱中。必须写window属性时走 helper 导出的qiankunWindowimport { qiankunWindow } from vite-plugin-qiankun/dist/helper; qiankunWindow.myFlag value;这样写入落在沙箱 window 上不会污染同页的其它子应用。 常用配置速查配置位置说明qiankun(应用名)首参vite.config子应用名主应用注册时必须一致basevite.config生产填真实运行域名开发填/或 dev server 地址useDevMode第二个参数从 Vite 开发服务器加载子应用需关闭热更新版本要求vite 2、typescript 4peerDependencies。它和谁配合干活qiankun主框架一侧负责应用注册、activeRule 路由匹配与整体调度本插件只解决让 Vite 子应用说 qiankun 的语言Vite子应用的构建工具开发服务器与 ESM 产出保持原样主应用技术栈不限仓库示例用 webpack 构建的主应用搭配了 Vue3、React18 等多个子应用混搭没问题适合哪些团队主应用已用 qiankun需要接入一个或多个 Vite 子应用子应用基于 Vite 2且没有必须产出 UMD的历史包袱能接受 JS 沙箱缺失用qiankunWindow规避并接受开发期二选一的 HMR 策略如果你的子应用正是 Vite 构建、主应用正好是 qiankun今天就可以按上面的三步接进来——整套改动不到 20 行代码。【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考