vue微前端搭建（微前端-qiankun：vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用）

一 、了解qiankun.js

qiankun - qiankun

1.1 、简单 ， 任意 js 框架均可使用 。微应用接入像使用接入一个 iframe 系统一样简单 ，但实际不是 iframe 。

1.2 、完备 ， 几乎包含所有构建微前端系统时所需要的基本能力 ，如 样式隔离 、js 沙箱 、预加载等 。解耦 ，与技术无关 。

1.3 、生产可用 ， 已在蚂蚁内外经受过足够大量的线上系统的考验及打磨 ，健壮性值得信赖 。

1.4 、qiankun 是一个基于 single-spa 的微前端实现库 ，旨在帮助大家能更简单 、无痛的构建一个生产可用微前端架构系统 。

1.5 、qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台 ，目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用 ，在易用性及完备性上 ，绝对是值得信赖的 。

1.6 、微前端概念

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略 。

1.7 、核心价值：

介绍 - qiankun

1.7.1 、技术栈无关：主框架不限制接入应用的技术栈 ，微应用具备完全自主权

1.7.2、独立开发 、独立部署：微应用仓库独立，前后端可独立开发 ，部署完成后主框架自动完成同步更新

1.7.3 、增量升级：在面对各种复杂场景时 ，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

1.7.4、独立运行时：每个微应用之间状态隔离 ，运行时状态不共享

1.8 、特性

1.8.1 、基于 single-spa 封装 ，提供了更加开箱即用的 API 。

1.8.2 、技术栈无关 ，任意技术栈的应用均可 使用/接入 ，不论是 React/Vue/Angular/JQuery 还是其他等框架 。可以对老jQuery项目进行升级 ，老业务不变 ，新页面使用vue3 ，这样就好了 ，目前没有看到相关的资料 ，看到一些资料是遇到问题的 ，比如全局变量丢失等 ，待研究 。

1.8.3 、HTML Entry 接入方式 ，让你接入微应用像使用 iframe 一样简单 。

1.8.4 、样式隔离，确保微应用之间样式互相不干扰。

1.8.5 、JS 沙箱 ，确保微应用之间 全局变量/事件 不冲突 。

1.8.6 、资源预加载 ，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度 。

1.8.7 、 umi 插件 ，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

二 、安装

yarn add qiankun

npm i qiankun

pnpm add qiankun

只需要在基座项目安装qiankun ，子应用不需要安装 。

三 、使用 ，qiankun官网demo

import { loadMicroApp } from qiankun ; // 加载微应用 loadMicroApp ({ name : reactApp , entry : //localhost:7100 , container : #container , props : { slogan : Hello Qiankun ,

四 、实战

项目实践 - qiankun

4.1 、vue3 ，基座项目/主应用/main-app

4.1.1、创建项目

npm init vue@latest

4.1.2 、安装乾坤

pnpm add qiankun

4.1.3 、main.ts注册微应用

import { registerMicroApps, addGlobalUncaughtErrorHandler, start } from qiankun ; // 注册子应用 registerMicroApps ([ name : subApp , entry : //localhost:3000 , container : #subAppContainerVue3 , // 和app.vue配置的节点 activeRule : /subAppVue3 , // 访问： http :// localhost : 5174 /subAppVue3 props : { mag : 我是主应用main // 主应用向微应用传递参数 // 再有其他子应用 ，同理 // 启动 qiankun start ({ prefetch : all , // 预加载 sandbox : { experimentalStyleIsolation : true , // 开启沙箱模式,实验性方案 // 添加全局异常捕获 addGlobalUncaughtErrorHandler ((handler) => { console. log ( "异常捕获" , handler);

4.1.4、app.vue创建挂载节点 ，再有其他子应用 ，同理

<div id = "subAppContainerVue3" ></div>

经过测试 ，主应用成功 。

4.2 、vue3-vite主应用 接入 vue3-vite子应用

微前端-qiankun：vue3-vite 接入 vue3-vite_snow@li的博客-CSDN博客

4.3 、vue3-vite主应用 接入 vue3-webpack子应用

微前端-qiankun：乾坤接入vue3-webpack_snow@li的博客-CSDN博客

4.4 、vue3-vite主应用 接入 vue2子应用

微前端-qiankun：vue3-vite 接入 nuxt2_snow@li的博客-CSDN博客

4.5 、vue3-vite主应用 接入 html子应用

4.6 、vue3-vite主应用 接入 jQuery子应用

不要对 iframe 抱有偏见 ，它也是微前端的一种实现方式 ，如果页面上无弹窗 、无全屏等操作 ，iframe 也是很好用的 。配置缓存和 cdn 加速 ，如果是内网访问，也不会很慢 。

iframe 和 qiankun 可以并存 ，jQuery 多页应用使用 iframe 接入就挺好 ，什么时候什么场景该用哪种方案，具体情况具体分析 。

最后 ，文章有什么问题或错误欢迎指出 ，谢谢！

微前端方案 qiankun（实践及总结）--摘抄 - 建站教程

jquery项目嵌入vue3框架_jquery vue3_卷大爷的博客-CSDN博客

4.7 、vue3-vite主应用 接入 nuxt2子应用

微前端-qiankun：vue3-vite 接入 nuxt2_snow@li的博客-CSDN博客

4.8 、nuxt2主应用 接入 nuxt2子应用

微前端-qiankun：nuxt2 接入 nuxt2_snow@li的博客-CSDN博客

4.9 、vue3-vite主应用 接入 nuxt3子应用

4.10 、nuxt作为主应用

https://www.cnblogs.com/rain-watcher/p/16938611.html

4.11 、当子应用同时作为基座应用时

vue3 + vite + qiankun - 简书

五 、过程记录

5.1、子应用qiankun做了样式隔离 ，父子应用样式隔离可以使用如下方法

默认情况下切换应用会采用动态样式表 ，加载的时候添加样式 ，删除的时候卸载样式（子应用之家的样式隔离）

主应用和子应用如何隔离（我们通过BEM规范）->（cssmodules）动态生成一个前缀（并不是完全隔离）

shadowDOM video 标签中的 快进 放大功能 增加全局样式就会有问题

六 、乾坤项目服务器部署

所有项目 ，包括基座项目 ，业务项目都在服务器可以独立部署 。

qiankun从接入到部署（nuxt篇） - 掘金

详细待研究 。不能被卡脖子 。

七 、欢迎交流指正 ，关注我 ，一起学习 。

参考链接：

SingleSpa及qiankun入门、源码分析及案例

https://www.cnblogs.com/Mr-Rshare/p/16571760.html

vue3 + vite + qiankun - 简书

Vue3 ，Vite ，TypeScript ，Monorepo，qiankun...... Buff叠满 ，BUG没有_qiankun vue3 vite_web老猴子的博客-CSDN博客

vue3 (三) qiankun+子应用（主应用）_vue3 qiankun_飞天代码的博客-CSDN博客

vue3+阿里乾坤实现主应用和微应用_乾坤微应用_花无缺001的博客-CSDN博客

07. vue3+vite+qiankun搭建微应用前端框架 ，并接入vue3微应用_vue微应用_qq_29517595的博客-CSDN博客

vue乾坤快速入门_哔哩哔哩_bilibili

微前端qiankun快速入门_哔哩哔哩_bilibili

qiankun从接入到部署（nuxt篇） - 掘金

关于qiankun的使用与部署过程，全详细记录_qiankun打包部署_朝花夕实的博客-CSDN博客

微前端qiankun的源码实现_哔哩哔哩_bilibili

如何设计实现微前端框架-qiankun

看滴普大前端是如何玩转基于“qiankun ”（乾坤）的微前端架构的_应用

qiankun.js应用_小三金的博客-CSDN博客_qiankun.js

微前端qiankun的实战_哔哩哔哩_bilibili

GitHub - umijs/qiankun: 📦 🚀 Blazing fast, simple and complete solution for micro frontends.

qiankun - qiankun

GitHub - kakajun/qiankun-vite-test: 技术站: vue3+vite+qiankun+lenar,父应用 vue3(vite) ，子应用用 vue(webpack) 和 vue3(webpack)和vue3(vite), 可以稍加修改作为中小型应用模板

vue项目落地(qiankun.js)微前端服务 - 知乎

微前端方案 qiankun（实践及总结）--摘抄 - 建站教程