vue-vben-admin 集成 qiankun 微前端快速指南三步跑通主子应用通信与样式隔离【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin三个团队共用一个管理后台仓库发版互相排队改个按钮颜色要整站回归。用 qiankun 微前端把 vue-vben-admin 的 apps/ 拆成基座加子应用每个模块独立部署部署互不阻塞。这份指南走完你能拿到一套可直接上生产的 vue-vben-admin 集成方案。先判断哪些场景值得拆发版节奏互相卡业务线各自维护包合一次主干就要一起回归拆开各自发版。技术栈混合既有 Vue 也有 React 老页面qiankun 不强求同框架按入口注册即可。权限边界清晰不同模块登录态、接口域不同拆开后每个微应用独立管自己的守卫。反过来单团队维护、强交互的模块共享状态、跨模块拖拽不建议拆拆完通信成本和首屏开销都会上来不如模块化组织。动手前的环境与目录规划环境要求 Node.js 和 pnpmmonorepo 由 pnpm-workspace.yaml 管理构建用 turbo 串联。主应用选 apps/web-ele第一个微应用选 apps/web-antd。改动集中在三处基座应用的main.ts、微应用的 apps/web-antd/src/bootstrap.ts 和 apps/web-antd/vite.config.ts。公共包 packages/ 基本不用动先把这三处想清楚再写代码。三步跑通 qiankun 主子应用第 1 步装依赖。在根目录执行pnpm add qiankun -F vben/web-ele第 2 步基座注册微应用。在基座main.ts的现有初始化之后追加import { registerMicroApps, start } from qiankun; // 容器 div 要提前写在 index.html 里 registerMicroApps([ { name: web-antd, entry: //localhost:5666, container: #micro-app-container, activeRule: /web-antd, }, ]); start({ sandbox: { experimentalStyleIsolation: true } });activeRule的前缀要和微应用自己的 base 对上这是后面路由不 404 的关键。第 3 步微应用暴露生命周期。现在的 apps/web-antd/src/bootstrap.ts 里bootstrap直接app.mount(#app)且不保存实例改造两点让挂载逻辑可重复执行并在 apps/web-antd/src/main.ts 里挂 qiankun 生命周期// main.ts 追加 let app: App | null null; export async function mount(props) { app await createVbenApp(props); // 原 bootstrap 逻辑改造为可复用 app.mount(#app); } export async function unmount() { app?.unmount(); app null; } if (!window.__POWERED_BY_QIANKUN__) { bootstrap(); // 独立运行时行为不变 }第 4 步收尾构建配置。在 apps/web-antd/vite.config.ts 里补三样// vite.config.ts 的 vite 字段内 server: { cors: true, // 跨域加载必需 headers: { Cross-Origin-Opener-Policy: same-origin }, }, base: /web-antd/, // 与 activeRule 前缀对齐VITE_PORT在 .env 里改一下dev 和 build 就都通了。qiankun 主子应用通信的三种姿势Props 传值。qiankun 把注册时的props原样交给mount回调最常用的场景是登录态// 基座注册时 props: { token: getToken(), user: getUserInfo() }, // 微应用 mount 内 mount(({ token, user }) { useAuthStore().setToken(token); // 跳过自己的登录页 });微应用拿到 token 直接跳过鉴权两边不再各自维护一套登录逻辑。动态状态同步。租户、主题这类会变的全局值用 qiankun 的initGlobalState开一条独立通道微应用端onGlobalStateChange订阅基座一处改、各端跟着刷新。样式隔离。qiankun 默认给容器下所有 DOM 加属性选择器前缀vben 的 Tailwind 全局规则就不会串到别的应用。注意 Antd 弹层会被 teleport 到 body 外作用域前缀罩不住弹层样式用样式前缀less 的 modifyVars补位。另外主应用里的容器 div 要有显式高度微应用根节点用min-h-screen撑满。qiankun 集成高频坑的排查路径白屏控制台报 CORS 拒绝原因基座从 dev server fetch 微应用入口开发服务器默认没有跨域头。 处理微应用 vite 配置server.cors: true第 4 步已加生产环境主子应用放同域反代到不同路径即可。activeRule 前缀重叠两个微应用同时激活原因activeRule 是前缀匹配/web和/web-antd会同时命中。 处理给每个微应用分配唯一前缀注册顺序也按从长到短排。strictStyleIsolation 一开Antd 弹层样式全丢原因strict 模式启用 shadow DOM被 teleport 到 body 的弹层直接失去全部样式。 处理保持experimentalStyleIsolation弹层样式用作用域前缀解决别上 strict。重复的 loading 和 PWA 提示原因vben 默认注入全局 loading 和 PWA 注册嵌入基座后这些基座才需要的功能重复出现。 处理微应用.env里VITE_INJECT_APP_LOADINGfalse、VITE_PWAfalse保持微应用最小。下一步到这里主子应用已经跑通登录态和样式也收敛了。生产部署建议同域nginx 把微应用静态资源反代到各自路径登录态统一走 props 加 initGlobalState路由和 base 的策略细节可以直接读 docs/guide/essentials/route.md 对照你的部署结构调。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考