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（实践及总结）--摘抄 - 建站教程