作为当今很流行的前端框架vue自然开发人员很熟悉，vite作为下一代前端构建工具其热度和趋势不言而喻；微前端又是一个被炒起来的概念，不懂吧人家觉得你不行，懂吧有些东西真不好理解。下面详细说一说微前端的那些事：
微前端方式iframe内嵌，这种方式当然成本比较低，容易做；但是呢好东西贵一点是有一定道理的；iframe也逃离不了这个定理，虽然iframe配置简单，而且具有出生就具备的隔离性，各个框架的页面不受影响，但是体验不好，首先页面回退的时候全部页面需要刷新；其次数据交互，iframe数据通信不好做呀，只能借助window传递；最后遇到弹窗问题，傻眼了，本来是想弹窗铺满整个页面，结果只有角落一处。所以这种方式局限性太大，还是需要继续寻觅。。。
single-spa，single-spa是通过监听urlchange事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。与其说是微前端框架，不如说是一种思维，解决方案；大致提出应用的生命周期，加载应用，然后调用应用的生命周期，具体的实现还是需要开发者自己实现。
qiankun，出身名门的微前端，基于single-spa来实现的，但是把那些繁杂的配置包装一层，使其简单易用，但是它没想到vite的出现，所以对于vite+vue3来说配置需要踩得坑太多了，险些爬不起来。。。
micro-app、今天的主角，借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。
vite+vue+micro-app配置分为两部分，主应用也就是基座应用，子应用部分：
基座应用：
入口文件main.js,映入微前端引擎micro-app启动微前端。此处的loader的作用是因为vite开发模式下引入的资源是相对路径，但是子应用也是vite的情况下，主应用加载资源的时候就会以主应用为域名去加载，加载不到子应用的资源，所以无法执行；需要处理子应用静态资源，写一个简易的插件，对开发环境的子应用进行处理，补全静态资源路径。
路由文件router.js中分配子应用路由，这里的path就是子应用的公共基础路径，部署的时候也部署到此目录；
引入子应用：在路由组件中引入子应用，name为子应用名称，需要与main.js中处理子应用资源的插件中声明的一致，不然资源路径出错。
vite.config.js声明自定义标签，防止vite打包过滤
子应用
路由模式声明为hash模式，推荐基座使用history路由，vite子应用使用hash路由，避免一些可能出现的问题。子应用如果是vue3，在初始化时路由时，createWebHashHistory不要传入参数
App.vue中更改应用挂载点：与主应用id不同即可
声明公共基础路径为子应用名称：base:子应用名称。
配置完后开发环境即可以运行，但是生成打包子应用还需要处理路径和资源路径：
以上只是简单粗暴的配置，完美的方式子应用名称从公共配置文件读取，不然需要每个地方单独设置，事件监听和数据交互，通过基座路由转发和下发的方式更解耦。学无止境，继续加油