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），仅供参考