需求
公司项目需要将两个独立运行的应用放在一个应用中，采用tab切换的形式展示不同的应用，同时两个应用还需要可以独立的运行。
方案确定
公司两个项目分别是vue3+vite2和vue3+vite3实现的。对于实现方法采用了微前端的方式，之前只是听说过概念并没有实现过。经过网上资料的查询比较，最后选择了无界解决方案。写此文章将其中的遇到问题记录一下。
微前端是什么
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。通俗来说，就是在一个web应用中可以独立的运行另一个web应用。
无界方案的好处
参考wujie-micro.github.io/doc/guide/#…
使用方法
新建一个vue3项目作为主应用，将需要合并的两个项目作为子应用。之后按照官网将无界进行安装引用。
之后将主应用的路由配置好，创建一个公共的组件，globalHeader,放入两个tabs进行切换，跳转到两个不同的页面，也就是使用这两个页面去承载我们的两个子应用A,B。之后先将子项目A启动引入。注:url是子应用A的运行地址。
先将子应用A测试通的再去引入子应用B。
引入后产生问题:
- 跨域问题
- 多个头部问题（自应用也有头部）
- 路由刷新问题
- 缓存问题
- 监听window的resize事件失效
- 登录页面不一致问题
- 登录问题（主应用登录后子应用自动登录，子应用token失效后通知主应用跳转到登录页）
- 头部功能点问题（用户信息，查看任务等）
对应解决方案：
- 跨域问题是一种常见的问题，在无界官网上面也有介绍。
我们子应用AB都是使用的axios作为网络请求,然后阅读相关问题得知此时的跨域是配置请求的问题，当前
withCredentials为true,所以按照下图所示进行修正。此变量也是无界框架提供的，如果是子应用该属性为true,否则是undefined。
当我配置完该属性后，A应用生效，但是B应用出现了其他问题，也就是官网给出常见问题的解决方案第二点，网络请求报302状态并且一直返回登录页。但是根据官网的解决方案并没有解决掉该问题。后来经过不断调试发现，主应用和自已用的server并没有处于同一ip(因为最初主应用和子应用也没处于同一ip但是可以调通，所以没有往这个方向想，最后并没有完全弄清，但是猜想是由于vite2和vite3的差异)。
将主子应用的host都设置为同一个，即可解决该问题。
- 多个头部问题
因为主子应用都有一样的导航标头，导致重复，需求上面说统一成一样的，所以直接在子应用的头上加上动态class，根据无界框架提供的字段__POWERED_BY_WUJIE__?: boolean可以判断当前是否是子应用从而使用display属性显示隐藏子应用头部。
- 路由刷新问题
官方提供了相应字段解决，只需配置时加入:sync:true。
- 缓存问题
频繁的切换会白屏时间过长，所以官方提供了保活模式和vue项目的keep-alive性质相同。
5. 监听window的resize事件失效
在子项目B中有大屏页面，其可以根据浏览器的大小变化去动态变化，（使用了resize事件，给大屏页面套了一个容器，使用transform属性去动态改变重新计算比例生成画面）但是使用了无界之后该属性失效，也就是现在浏览器大小改变只是改变了主应用的大小。最后想到的解决方案是采用无界提供的主子应用通信功能。写一个防抖函数，如果主应用的大小变化了就每0.2s给子应用通知重绘，如此即可实现大屏的适应性问题。
-
- 将子应用的登陆功能抽到主应用，因为iframe可以识别到同一浏览器下的session.所以主应用登陆之后识别到对应的token，子应用直接跳转到对应主页即可。
头部功能点主要是登出，子应用失效后使用无界提供的通信方法，告诉主应用退出即可。
以上就是本次使用微前端的全部内容，因为需求不是很大，所以用到的功能点不是特别多，仔细研读了一下官方文档发现还是有一部分内容我们还没用到，有待开发。无界应用总体用下来还是比较好用的。后续有空会研读一下源码，看一下具体是怎么实现的。
