一、了解qiankun.js
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、核心价值：
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', }, });
四、实战
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、当子应用同时作为基座应用时
五、过程记录
5.1、子应用qiankun做了样式隔离，父子应用样式隔离可以使用如下方法
默认情况下切换应用会采用动态样式表，加载的时候添加样式，删除的时候卸载样式（子应用之家的样式隔离）
主应用和子应用如何隔离（我们通过BEM规范）->（cssmodules）动态生成一个前缀（并不是完全隔离）
shadowDOM video 标签中的 快进 放大功能 增加全局样式就会有问题
六、乾坤项目服务器部署
所有项目，包括基座项目，业务项目都在服务器可以独立部署。
详细待研究。不能被卡脖子。
七、欢迎交流指正，关注我，一起学习。
