记录前端微服务-qiankun从0到1搭建（主要核心点）需要注意的地方前言：由于我们公司的项目基本都是后台管理系统类的，所以要求微应用入口必须是主应用的一个路由菜单、而且需要处理菜单权限、信息共享等问题、但是qiankun官方文档中案例记录中使用的都是registerMicroApps方法来进行引入子应用的配置、导致项目刚开始的时候踩了很多坑。所以在此记录一下一些需要注意的点。文章末尾有自己搭建的简易的主应用模板、以及微应用模板、后续需要使用可以直接clone下来，稍微改改就能用了。问题：(1).使用registerMicroApps注册微应用的时候，无法解决路由缓存、子应用动态路由（权限）等

一、背景主应用：vue3、vite主项目接入qiankun子应用：vue3、webpack二、代码-接入子应用2.1、安装vite-plugin-qiankun（qiankun官方不支持vite）需要安装插件pnpmaddvite-plugin-qiankun2.2、vite.config.tsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importvueJsxfrom'@vitejs/plugin-vue-jsx'importqian

一、qiankun使用场景　　1. 简介：qiankun是在single-spa的基础上实现的，可以保证各个项目独立使用，也可以集成使用。各系统之间不受技术栈的限制，集成使用也能保证各样式和全局变量的隔离。　　　　　　模块的插拔式使用，当公司项目集是一个大系统下包含多个子系统或者模块时，可以采用这种方式动态部署各个系统。　　　　　　亦或者是老项目技术升级和重构，可以通过qiankun按模块进行改造，避免对整个系统产生较大的影响。　　　　　　功能和iframe类似，但是由于iframe数据通信难度较大，且有安全和SEO的问题，所以iframe使用体验不佳。　　2. 原理逻辑：　　　　a. 需要在

前言qiankun是一个基于single-spa的微前端实现库，帮助你构建一个生产可用的微前端架构系统。qiankun支持多种技术栈的微应用接入，提供了简单、解耦、技术栈无关、独立开发、独立运行、增量升级、样式隔离、资源预加载等特性，以及umi插件一键切换。微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关：主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署：微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的

一、single-spa简介要了解qiankun的实现机制，那我们不得不从其底层依赖的single-spa说起。随着微前端的发展，我们看到在这个领域之中出现了各式各样的工具包和框架来帮助我们方便快捷的实现自己的微前端应用。在发展早期，single-spa可以说是独树一帜，为我们提供了一种简便的微前端路由工具，大大降低了实现一个微前端应用的成本。我们来看一下一个典型single-spa微前端应用的架构及代码。主应用（基座）：作为整个微前端应用中的项目调度中心，是用户进入该微前端应用时首先加载的部分。在主应用中，通过向single-spa提供的registerApplication函数传入指定的参

qiankun框架作者：蜗牛波波老师时间：2023年最新版本一、微前端基本概念概念：微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。核心目标：微前端的核心目标是将巨石应用拆解成若干可自治的松耦合微应用。应用场景：商业产品设计，一个大的商业产品，开发过程中拆分微前端架构来设计，可以将大系统拆分微独立的各种子模块。在进行产品销售过程中可以根据用户的需求

目录前言主应用微应用部署前言因为业务系统接入的需要，决定将一个vue3+vite+ts的主应用系统，改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。网上有很多关于微应用改造的案例，但很多都没写部署之后什么情况。写了部署的，没有实操部署在二级目录、三级目录是什么情况，甚至没有对部署之后的情况做测试、没有说明。这是在整个改造过程中最难的一点，也是最困扰我的一个问题。我们所改造的应用说明：主应用：vue3+vite+ts微应用1：vue2，qiankun官网API是基于vue2+webpack，我们对vue2也进行了接入，但是在本篇文章中不做说明。微应用2：

一、了解qiankun.jsqiankun-qiankun1.1、简单，任意js框架均可使用。微应用接入像使用接入一个iframe系统一样简单，但实际不是iframe。1.2、完备，几乎包含所有构建微前端系统时所需要的基本能力，如样式隔离、js沙箱、预加载等。解耦，与技术无关。1.3、生产可用，已在蚂蚁内外经受过足够大量的线上系统的考验及打磨，健壮性值得信赖。1.4、qiankun是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。1.5、qiankun孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，目前qiankun已在蚂蚁内部

qiankun官网vite-plugin-qiankun插件github地址：vite-plugin-qiankun主应用1、安装乾坤$yarnaddqiankun#或者npmiqiankun-S2、在主应用中注册微应用（main.ts）import{registerMicroApps,start}from'qiankun';registerMicroApps([{name:'reactapp',//appnameregisteredentry:'//localhost:7100',container:'#vue-app-container',activeRule:'/yourActiveRu

先来张图片压压惊image.png在线demo：wzs.bengdada.com/单独访问在线子应用：subapp/micro-reactsubapp/micro-vue2subapp/micro-vue3一.导读1.什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关:主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署:微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级:在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是