vite-plugin-qiankun 上手指南5 分钟把 Vite 子应用接入 qiankun 微前端【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun主应用越堆越重各团队开发的子应用互相踩脚一次发版牵一发动全身。更头疼的是你手里的 Vite 项目想接入 qiankun 微前端却找不到现成的方案。vite-plugin-qiankun 是一个 Vite 插件它让你的 Vite 项目直接成为 qiankun 微前端的子应用同时保留 Vite 的 ES 模块构建优势。下面带你 5 分钟跑通一个可被主应用加载的子应用。安装与注册插件步骤 第一步在子应用里安装插件把插件装进你的 Vite 子应用npm install vite-plugin-qiankun --save-dev预期效果插件进入 devDependencies接下来只需改配置和入口文件。第二步在 vite.config.ts 中注册这段代码做两件事注册插件并指定子应用名同时给生产环境设置资源前缀 baseimport qiankun from vite-plugin-qiankun; export default { plugins: [qiankun(myApp)], base: http://xxx.com/ }预期效果Vite 输出 HTML 时插件会自动注入生命周期注册代码你不用手写任何脚本劫持逻辑。第三步在入口文件里写子应用生命周期借助插件自带的 helper把生命周期交给 qiankun 调度import { renderWithQiankun } from vite-plugin-qiankun/dist/helper; renderWithQiankun({ mount(props) { render(props) }, unmount(props) { root.unmount() }, bootstrap() {} });预期效果主应用加载这个子应用时会按 bootstrap、mount 的顺序触发你写的逻辑切换路由离开时 unmount 卸载组件不留残留。关键配置项拆解挑 4 个最常用的配置逐项说明配置项是什么默认行为什么时候要改子应用名qiankun(myApp)传给主应用的生命周期挂载键无默认值必填必须和主应用注册时一致base子应用资源的公共前缀相对当前路径生产环境要写成实际部署域名useDevMode开发模式调试开关关闭想在 dev 下当子应用调试时开启qiankunWindow插件暴露的沙箱窗口引用指向沙箱或真实 window需要写全局变量时统一用它补充一个细节判断是否运行在主应用内用qiankunWindow.__POWERED_BY_QIANKUN__。独立调试时它不存在你再手动调一次render({})即可正常渲染。import { qiankunWindow } from vite-plugin-qiankun/dist/helper; if (!qiankunWindow.__POWERED_BY_QIANKUN__) { render({}); }预期效果子应用既能被主应用加载也能npm run dev单独打开调试一套代码两边都能跑。实战场景Vue3 与 React 子应用混合管理仓库 example 目录就是一个完整的多子应用工程主应用负责注册下面挂着 viteappReact、vue3subVue3、react18 等多个子应用。主应用侧只需在 qiankun 里注册 entry 和激活规则registerMicroApps([ { name: viteapp, entry: http://127.0.0.1:7106, container: #subapp-viewport, activeRule: /viteapp }, { name: vue3sub, entry: http://127.0.0.1:7108, container: #subapp-viewport, activeRule: /v3sub } ]);预期效果切换 URL 就能在 React 和 Vue3 子应用之间来回切换多个子应用同页运行互不影响。想直接跑起来看效果可以克隆仓库体验git clone https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun npm install npm run example:install npm run example:start预期效果一条命令起主应用加全部子应用浏览器里即可看到混合技术栈的微前端页面。新手最容易踩的三个坑 ⚠️坑一子应用名对不上。主应用registerMicroApps里的 name 和qiankun(xxx)传入的字符串必须完全一致不一致时生命周期永远不会触发页面一片空白且没有报错。坑二热更新和子应用调试二选一。useDevMode开启后会和vitejs/plugin-react等热更新插件冲突dev 下只能保留一个。想边改边看子应用效果就开useDevMode想保 HMR 就关掉它、以独立模式调试。坑三直接往 window 上挂全局变量。因为 ES 模块加载机制与 qiankun 沙箱实现有冲突你的子应用并没有运行在 JS 沙箱里。直接写window.xxx会污染其他子应用请务必用qiankunWindow.xxx代替。生态协同这个插件的上游是 qiankun 微前端框架构建体系基于 Vite子应用则兼容 Vue、React 等主流技术栈配合官方示例即可覆盖绝大多数接入场景。写在最后vite-plugin-qiankun 用一行插件配置换掉了大量手写的 HTML 改造和生命周期胶水代码让你专注业务本身。接下来你可以尝试把useDevMode切换成变量按环境动态选择热更新或子应用调试两种开发模式。【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
