一个比较笨的办法就是直接把别人项目这个页面的代码拷贝过来，但是万一别人不是 开发的，或者说 版本、 库等不同，以及别人的页面加载之前操作（路由拦截，鉴权等）我们都需要拷贝过来，更重要的问题是，别人代码有更新，我们如何做到同步更新。
长远来看，代码拷贝不太可行，问题的根本就是，我们需要做到让他们的代码运行在他们自己的环境之上，而我们对他们的页面仅仅是“引用”。这个环境包括各种插件，也包括加载前的逻辑（读 ，鉴权，路由拦截等）。私有 可以共享组件，但是依然存在技术栈不同/UI库不同等问题。
代码越来越多，打包越来越慢，部署升级麻烦，一些插件的升级和公共组件的修改需要考虑的更多，很容易牵一发而动全身项目太大，参与人员越多，代码规范比较难管理，代码冲突也频繁。产品功能齐全，但是客户往往只需要其中的部分功能。剥离不需要的代码后，需要独立制定版本，独立维护，增加人力成本。
举个栗子，你们的产品有几百个页面，功能齐全且强大，客户只需要其中的部分页面，而且需要你们提供源码，这时候把所有代码都给出去肯定是不可能的，只能挑出来客户需要，这部分代码需要另外制定版本维护，就很浪费。
微前端的诞生也是为了解决以上两个问题：
复用（嵌入）别人的项目页面，但是别人的项目运行在他自己的环境之上。巨无霸应用拆分成一个个的小项目，这些小项目独立开发部署，又可以自由组合进行售卖。
使用微前端的好处：
技术栈无关，各个子项目可以自由选择框架，可以自己制定开发规范。快速打包，独立部署，互不影响，升级简单。可以很方便的复用已有的功能模块，避免重复开发。
目前微前端主要有两种解决方案： 方案和 方案
大家都很熟悉，使用简单方便，提供天然的 隔离，也带来了数据传输的不便，一些数据无法共享（主要是本地存储、全局变量和公共插件），两个项目不同源（跨域）情况下数据传输需要依赖 。
有很多坑，但是大多都有解决的办法：
页面加载问题
和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载，阻塞 事件。每次点击都需要重新加载，虽然可以采用 来做缓存，但是页面缓存过多会导致电脑卡顿。「（无法解决）」
布局问题
必须给一个指定的高度，否则会塌陷。
解决办法：子项目实时计算高度并通过 发送给主页面，主页面动态设置 高度。有些情况会出现多个滚动条，用户体验不佳。
弹窗及遮罩层问题
弹窗只能在 范围内垂直水平居中，没法在整个页面垂直水平居中。
解决办法1：通过与框架页面消息同步解决，将弹窗消息发送给主页面，主页面来弹窗，对原项目改动大且影响原项目的使用。解决办法2：修改弹窗的样式：隐藏遮罩层，修改弹窗的位置。
内的 无法全屏
弹窗的全屏，指的是在浏览器可视区全屏。这个全屏指的是占满用户屏幕。
全屏方案，原生方法使用的是 ，插件：vue-fullscreen。当页面在 里面时，全屏会报错，且 结构错乱。
浏览器前进/后退问题
和主页面共用一个浏览历史， 会影响页面的前进后退。大部分时候正常， 多次重定向则会导致浏览器的前进后退功能无法正常使用。并且 页面刷新会重置（比如说从列表页跳转到详情页，然后刷新，会返回到列表页），因为浏览器的地址栏没有变化， 的 也没有变化。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61751.shtml
