微前端

single-spa是一个用于前端微服务化的JavaScript前端解决方案。single-spa的核心就是定义了一套协议。协议包含主应用的配置信息和子应用的生命周期，通过这套协议，主应用可以方便的知

下面以一个实际案例来详细介绍如果通过iframe将一个线上在运行的系统接入到另外一个系统，实现微前端的全过程。

微前端项目集成子应用过程中，往往会遇到css命名冲突，样式污染问题。 例如qiankun框架支持沙箱css，可以开启strictStyleIsolation等解决方案。

微前端提供了一种技术：可以将多个独立的Web应用聚合到一起，提供统一的访问入口。一个微前端应用给用户的感观就是一个完整的应用，但从技术角度上来讲它是由一个个独立的、通过某种方式组合而成的应用。

本文中主应用采用vue2构建，微应用采用vue2、vue3、react构建。其中主应用和微应用都采用webpack打包，并且主应用路由模式选择了History（该模式需要服务端支持），微应用路由模式采

qiankun官方暂未有文档表明已经支持Vite，所以直接用普通方式接入vite构建的子应用时会出现如下问题

micro-app 是借鉴了 Web Component 的思想，通过 Custom Element 结合自定义的 Shadow Dom，将微前端封装成一个类 Web Component 组件

qiankun官方demo用的是history方式的路由，我们知道history需要后端配合，否则线上环境刷新会404。那么今天我们就研究下如何将主应用改为hash模式。