vite-plugin-qiankun 5 分钟从零跑通接入【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankunvite-plugin-qiankun 是一个把 Vite 项目接入乾坤qiankun微前端同页运行多个子应用的方案的 Vite 插件三行配置即可并保留 Vite 的 ES 模块特性。解决子应用接入痛点三行代码声明生命周期你接 qiankun 子应用时踩过坑吗往往要手写 UMD 导出webpack 时代那种带全局导出的打包格式再注册四个生命周期函数漏一个子应用就在主应用里白屏。Vite 产出的是 ES 模块老 webpack 的接法直接失效。插件会自动改写入口并注册 qiankun 的 bootstrap、mount、unmount 生命周期不用手写 UMD也不用动你现有的 Vite 配置。三步跑通 qiankun 子应用安装插件完成接入准备 先在子应用里装依赖命令跑完没报 ERR 就算装好了。npm install vite-plugin-qiankun --save-dev改配置声明子应用名在配置里注册插件、在入口用 renderWithQiankun 声明生命周期一共两处文件。// vite.config.ts import qiankun from vite-plugin-qiankun export default defineConfig({ plugins: [ qiankun(myMicroAppName), // ← 换成你的子应用名 ], base: http://你的域名.com/, // 生产环境子应用需要域名 base })子应用名要和主应用注册时保持一致入口这样声明生命周期// main.tsx import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helper renderWithQiankun({ mount(props) { render(props) }, bootstrap() { /* 一次性初始化 */ }, unmount(props) { /* 清理容器 */ }, }) if (!qiankunWindow.__POWERED_BY_QIANKUN__) render({}) // 非子应用环境时独立渲染改完保存npm run dev能正常启动、页面照常渲染就说明配置生效了。验证效果确认接入成功克隆官方示例装好后一条命令拉起主应用加四个子应用。git clone https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun cd vite-plugin-qiankun npm install npm run example:install npm run example:start控制台打印出viteapp mount、子应用画面出现在主应用的子应用区域即代表成功。看清插件在底层做了什么自动分包怎么实现把入口脚本改写成动态 importqiankun 没法从 ESM 的script标签里读取生命周期。插件用 cheerio一个 HTML 解析库把 HTML 里的入口script改写成import(...)动态加载加载完成后在.finally里登记生命周期。挂载时机怎么控制占位 Promise 等模块加载完页面初次加载时插件先往window[qiankunName]挂一组占位生命周期内部各是一个 Promise。等入口模块跑完报个到Promise 才 resolve 并调用真正的 mount。主应用不用关心子应用怎么构建看到的只有应用已就绪。沙箱隔离靠什么机制全局写入统一走 qiankun 代理ES 子应用不跑在 JS 沙箱里直接写 window 会落到真实 window污染其他子应用。插件提供了 qiankunWindow指向沙箱代理 window.proxy全局变量都从它写相当于各有一块独立的全局命名空间。两个落地场景任选其一场景 AVue 3.4 Vite 5 营销页接入 Vue 2 管理后台主应用适合线上跑着 webpack Vue 2 后台、正逐步迁 Vite 5 Vue 3.4 的团队。新子应用写好qiankun(xxx)主应用registerMicroApps同名注册新老技术栈按路由共存子应用可独立部署、独立升级。场景 BReact 18 Vite 5 数据平台同页混排多个子应用适合中台团队React 18 新子应用和老版子应用要嵌进同一块仪表盘。每个子应用只管自己的 vite 配置加入口声明主应用统一按 activeRule 分流路由拿到独立开发、按需加载的效果。绕开五个新手高频坑位️ 子应用 dev 模式白屏 → useDevMode 的改写和 react-refresh 热更新插件冲突 → 传{ useDevMode: true }并关掉 reactRefresh。生产环境子应用 404 → base 没设成子应用的部署地址 → 配置里补上base: http://你的域名/这个报错 90% 的人第一周都会遇到。全局变量跨子应用串味 → 直接写了 window绕过了沙箱 → 统一换成qiankunWindow.xxx。主应用报 mount is not a function →qiankun(name)和 registerMicroApps 的名字不一致 → 两边改成一样。直接访问子应用 URL 页面空白 → 只在 mount 里渲染没有独立运行兜底 → 补上if (!qiankunWindow.__POWERED_BY_QIANKUN__) render({})。搭配延伸工具走下一步 qiankun主应用侧的微前端框架没有它插件就没有主可挂子应用靠 registerMicroApps 声明。single-spaqiankun 的底层引擎读懂它的心跳模型bootstrap/mount/unmount 三个词就不再抽象。cheerio插件内部改写 HTML 用的解析库想扩展入口改写逻辑从 src/ 目录下手最快。跑通了去 issue 区留言打个勾。卡住了就把完整报错和配置贴上来我们一起看。【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 vite-plugin-qiankun 5 分钟从零跑通接入
vite-plugin-qiankun 5 分钟从零跑通接入【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankunvite-plugin-qiankun 是一个把 Vite 项目接入乾坤qiankun微前端同页运行多个子应用的方案的 Vite 插件三行配置即可并保留 Vite 的 ES 模块特性。解决子应用接入痛点三行代码声明生命周期你接 qiankun 子应用时踩过坑吗往往要手写 UMD 导出webpack 时代那种带全局导出的打包格式再注册四个生命周期函数漏一个子应用就在主应用里白屏。Vite 产出的是 ES 模块老 webpack 的接法直接失效。插件会自动改写入口并注册 qiankun 的 bootstrap、mount、unmount 生命周期不用手写 UMD也不用动你现有的 Vite 配置。三步跑通 qiankun 子应用安装插件完成接入准备 先在子应用里装依赖命令跑完没报 ERR 就算装好了。npm install vite-plugin-qiankun --save-dev改配置声明子应用名在配置里注册插件、在入口用 renderWithQiankun 声明生命周期一共两处文件。// vite.config.ts import qiankun from vite-plugin-qiankun export default defineConfig({ plugins: [ qiankun(myMicroAppName), // ← 换成你的子应用名 ], base: http://你的域名.com/, // 生产环境子应用需要域名 base })子应用名要和主应用注册时保持一致入口这样声明生命周期// main.tsx import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun/dist/helper renderWithQiankun({ mount(props) { render(props) }, bootstrap() { /* 一次性初始化 */ }, unmount(props) { /* 清理容器 */ }, }) if (!qiankunWindow.__POWERED_BY_QIANKUN__) render({}) // 非子应用环境时独立渲染改完保存npm run dev能正常启动、页面照常渲染就说明配置生效了。验证效果确认接入成功克隆官方示例装好后一条命令拉起主应用加四个子应用。git clone https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun cd vite-plugin-qiankun npm install npm run example:install npm run example:start控制台打印出viteapp mount、子应用画面出现在主应用的子应用区域即代表成功。看清插件在底层做了什么自动分包怎么实现把入口脚本改写成动态 importqiankun 没法从 ESM 的script标签里读取生命周期。插件用 cheerio一个 HTML 解析库把 HTML 里的入口script改写成import(...)动态加载加载完成后在.finally里登记生命周期。挂载时机怎么控制占位 Promise 等模块加载完页面初次加载时插件先往window[qiankunName]挂一组占位生命周期内部各是一个 Promise。等入口模块跑完报个到Promise 才 resolve 并调用真正的 mount。主应用不用关心子应用怎么构建看到的只有应用已就绪。沙箱隔离靠什么机制全局写入统一走 qiankun 代理ES 子应用不跑在 JS 沙箱里直接写 window 会落到真实 window污染其他子应用。插件提供了 qiankunWindow指向沙箱代理 window.proxy全局变量都从它写相当于各有一块独立的全局命名空间。两个落地场景任选其一场景 AVue 3.4 Vite 5 营销页接入 Vue 2 管理后台主应用适合线上跑着 webpack Vue 2 后台、正逐步迁 Vite 5 Vue 3.4 的团队。新子应用写好qiankun(xxx)主应用registerMicroApps同名注册新老技术栈按路由共存子应用可独立部署、独立升级。场景 BReact 18 Vite 5 数据平台同页混排多个子应用适合中台团队React 18 新子应用和老版子应用要嵌进同一块仪表盘。每个子应用只管自己的 vite 配置加入口声明主应用统一按 activeRule 分流路由拿到独立开发、按需加载的效果。绕开五个新手高频坑位️ 子应用 dev 模式白屏 → useDevMode 的改写和 react-refresh 热更新插件冲突 → 传{ useDevMode: true }并关掉 reactRefresh。生产环境子应用 404 → base 没设成子应用的部署地址 → 配置里补上base: http://你的域名/这个报错 90% 的人第一周都会遇到。全局变量跨子应用串味 → 直接写了 window绕过了沙箱 → 统一换成qiankunWindow.xxx。主应用报 mount is not a function →qiankun(name)和 registerMicroApps 的名字不一致 → 两边改成一样。直接访问子应用 URL 页面空白 → 只在 mount 里渲染没有独立运行兜底 → 补上if (!qiankunWindow.__POWERED_BY_QIANKUN__) render({})。搭配延伸工具走下一步 qiankun主应用侧的微前端框架没有它插件就没有主可挂子应用靠 registerMicroApps 声明。single-spaqiankun 的底层引擎读懂它的心跳模型bootstrap/mount/unmount 三个词就不再抽象。cheerio插件内部改写 HTML 用的解析库想扩展入口改写逻辑从 src/ 目录下手最快。跑通了去 issue 区留言打个勾。卡住了就把完整报错和配置贴上来我们一起看。【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考