vite-plugin-qiankun 完整指南三步在 Vite 中搞定 qiankun 微前端子应用【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun想在 Vite 项目里快速接入 qiankun 微前端vite-plugin-qiankun 正是为此而生——它保留 Vite 的 ESM 特性让子应用接入只需一步配置。本文带你走通全流程。为什么单个 Vite 项目直接跑不了乾坤微前端先抛个灵魂拷问你的 Vite 子应用明明能独立跑起来为什么主应用一加载它就装死问题出在几个地方生命周期对不上。qiankun 需要拿到子应用的 bootstrap / mount / unmount 三个函数而 Vite 入口是标准 ES module默认不会把生命周期挂到全局主应用拿不到资源没拆开。子应用的代码和公共库Vue、React 等混在一个大包里多个子应用同页加载时重复下载白白浪费流量开发模式不友好。Vite dev 下脚本是固定路径的 module 标签没法直接塞进乾坤的加载流程里。一句话Vite 微前端场景需要一层翻译把标准 Vite 产物翻译成 qiankun 认识的形态。vite-plugin-qiankun 干的就是这件事。qiankun 接入的三步安装、配置、导出生命周期1️⃣ 安装插件一行命令搞定建议放在开发依赖里npm install sh-winter/vite-plugin-qiankun --save-dev2️⃣ vite.config 怎么配在vite.config.ts里注册插件注意base必须与子应用名保持一致import { defineConfig } from vite import qiankun from vite-plugin-qiankun export default defineConfig({ base: /my-sub-app/, plugins: [ qiankun(my-sub-app) ] })qiankun()的入参就是子应用名必须和主应用注册时用的名字完全一致base决定了子应用资源的访问前缀两者错一位资源就会 404。3️⃣ 子应用入口导出生命周期函数在子应用入口文件里导出三个 async 函数插件会自动把它们挂到主应用可感知的位置const app createApp(App) export async function bootstrap() { console.log(子应用已就绪) } export async function mount(props) { app.mount(props.container ? props.container.querySelector(#app) : document.getElementById(app)) } export async function unmount() { app.unmount() }这样qiankun 主子应用之间就打通了——主应用负责喊人子应用负责响应。核心机制拆解插件到底替你做了什么 自动化分包每个子应用住进自己的储物间插件会把子应用代码自动分割成独立 chunk按需加载。就像每户人家有独立储物间你只搬自己那屋的东西不会把整栋楼打包。 公共依赖只加载一次整层楼共用一部电梯像 Vue、React 这类公共库会被单独打进公共 chunk首次进入页面时预加载一次之后的子应用直接复用。相当于全楼共用一部电梯谁都不用再单独装。 沙箱隔离每个隔间里怎么折腾都不影响邻居插件为每个子应用生成独立沙箱。子应用里随便改全局变量、乱挂样式都锁在自己的隔间里同页渲染多个子应用时互不串扰稳定性由此而来。机制解决的问题生活化类比自动化分包子应用代码独立成 chunk按需加载每户独立储物间公共依赖 chunk公共库只下载一次省流量省时间整层楼共用一部电梯沙箱隔离多子应用同页运行互不干扰每个隔间独立互不影响微前端落地这些坑我们替你踩过了⚠️base 与子应用名必须严格对应这是 404 报错的第一大来源⚠️ 生命周期函数必须从入口模块导出且为 async写在组件内部插件是找不到的 本地联调时给主应用配好代理子应用 dev 端口固定下来避免频繁改动主应用配置 子应用内部尽量别直接改写全局对象——沙箱能兜住大部分情况但别把隔离当保险去依赖 保持主、子应用 Vite 版本一致插件要求 vite 2减少构建行为差异带来的灵异问题。结语把生态凑齐微前端落地才算完整vite-plugin-qiankun 的价值是让 Vite 子应用以最小成本变成合格的 qiankun 公民三步接入、分包与沙箱自动搞定。搭配建议如下生态角色一句话点评Qiankun基于 Single-SPA 的微前端框架负责主子应用的调度与加载Vite提供秒级热更的开发体验是本插件的运行土壤Vue3组合式 API 让子应用代码更轻适合快速拆分模块React与 Vite 配合成熟React 子应用同样三步接入按这套组合走下来微前端落地不再是大工程而是可以按子应用粒度持续推进的日常迭代。【免费下载链接】vite-plugin-qiankun保留vite es特性快速接入乾坤微前端子应用项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-qiankun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考