介绍最近在做一个微前端项目，过程中踩了不少坑。在有限的资料中不断尝试，不断犯错，默默流泪。哈哈。把这次踩到的坑记录下来，让更多的人少走弯路，本项目使用蚂蚁金服qiankun作为开发基础。废话不多说！！！那么什么是乾坤呢？qiankun是一个基于single-spa的微前端实现库，旨在帮助大家更轻松无痛地搭建一个生产就绪的微前端架构系统。什么是微前端微前端架构具有以下核心价值：技术栈无关主框架不限制应用程序技术栈的访问，微应用具有完全的自主权和独立开发、独立部署微-应用仓库独立，前后端可独立开发。部署完成后，主框架自动完成同步更新和增量升级。当面对各种复杂的场景时，我们通常很难升级或重构现有系统的整个技术栈，而微前端就是一个很好的实现渐进重构的手段和策略。独立运行时，各个微应用之间的状态是隔离的，运行时不共享状态。摘自乾坤官方文档。注册微应用//导入乾坤函数import{registerMicroApps,setDefaultMountApp,start}from"qiankun";封装render方法该方法一开始需要在main.js中调用一次，主要用来挂载主应用，然后子应用之间互相调用，所以假装判断。传入的参数是子应用的html和loading状态的content字段。我们将它们存储在vuex中，方便使用letapp=null;functionrender({appContent,loading}){if(!app){app=newVue({router,store,render:h=>h(App),}).$mount('#app');}else{store.commit('microApp/changeCenter',appContent);store.commit('microApp/changeLoading',loading);}}微应用注册以下应用均可获取数据。本文中注册小程序的案例比较简单，大家也容易理解。自注册的参数**container和render**踩了很多坑，下面重点讲解。functiongenActiveRule(routerPrefix){returnlocation=>location.pathname.startsWith(routerPrefix);}//传递给子应用的数据letmsg={data:'践行爱的苦涩，学会放下曾经的欲念'}letapps=[{name:'linjunjie',entry:'//localhost:215',//改成自己的子应用容器的端口号:'#subView',//nodeid//沙盒模式//render:render,//普通模式activeRule:genActiveRule('/star'),props:msg}]//注册的子应用参数是一个数组registerMicroApps(apps,{beforeLoad:[app=>{console.log(app)console.log('[LifeCycle]beforeload%c%s','color:green;',app.name);},],beforeMount:[app=>{console.log('[LifeCycle]beforemount%c%s','color:green;',app.name);},]afterUnmount:[app=>{console.log('[LifeCycle]afterunmount%c%s','color:green;',app.name);},],});setDefaultMountApp('/star/linjunjie')//启用沙盒模式会自动触发qiankun匹配逻辑，所有micr匹配activeRule规则的o-app会被插入到指定的容器中，同时顺序调用微应用暴露的生命周期钩子主应用为子应用准备的显示元素
