无界构建微前端？NO！NO！NO！多系统融合思路！

菜鸟最近遇见的一个公司的规划需求：

公司想把全部的系统合并，使其只用一个登录，就可以访问全部的系统！避免系统太多，导致别人使用负担加大！

菜鸟刚开始做这个就想到了微前端，规划了好久，现在才有空来研究！

注：本文是个人思路的展现，并非技术介绍文章，不感兴趣可以划走！

微前端理解

1、微前端概念

微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。

2、微前端特性

3、微前端方案

a、iframe

b、qiankun --> 使用比较复杂 --> 自己写对vite的插件

c、micro-app --> 京东开发 --> 对vite支持更拉跨

注:

适配 vite 需要写很多代码，有些还要改，而且会失去很多功能！

d、EMP 方案–> 必须使用 webpack5 --> 很多人感觉不是微前端 --> 去中心化方式去共享模块，更像拆包

e、无界

更多见我的b站笔记：https://www.bilibili.com/opus/934644514948120594

安装无界

无界的使用相对简单，随便创建一个应用然后安装即可

这里直接使用的是作者进一步封装后的无界，更加简单！

使用

安装完成后就可以使用了，也是非常简单，直接 main.js 中引入即可，然后就可以在vue文件中直接当成组件使用

这里的url就是你子应用跑起来的时候的地址！

但是正如菜鸟标识的，发现 webpack+vue3 的并不能正常显示，问了小满大佬才发现是跨域的问题！

应用跨域问题解决

在webpack中添加这个配置，就可以出现了。

但是还有很多问题，菜鸟确实解决不了！

无界的槽点

无界使用的人还是太少，遇见问题没办法搜到，只能问大佬，但是 大佬回你是情分，不回才是本分！菜鸟在b站上跟着小满zs大佬学的无界，也顺利加上了大佬。但是问了两个问题后，可能大佬就要忙自己的事情，没时间回答，菜鸟也就识趣的自己研究，然后研究很长时间，也不是很理解为什么，就发沸点问jym了！

沸点见：https://juejin.cn/pin/7451432113994825766

加了无界的群，问的问题也没人有反应！

硬着头皮换思路

菜鸟想着反正后端也要做 sso，不如就直接把一个系统当主系统，其他的都当链接放进来得了，跳转过去的时候携带token！

正好有一个集合了很多小的功能的系统在重构，所以就将其作为主系统了！后端使用了若依，所以前端也直接使用若依这个框架了！

所以大致的思路就变成了这样了

这个基本就很简单，但是项目重构还是遇见了很多问题，这里就继续做记录了！

问题一：pxtorem

菜鸟之前一直都是用 webpack 的 pxtorem，详见：px2rem不生效，但若依是vite开发的，所以菜鸟必须得解决这个插件迁移的问题！

这里就不展示解决流程了，反正就是不断尝试+GPT！菜鸟个人感觉vite使用pxtorem更加简洁，因为vite原生对postcss有支持，所以直接下载一个插件postcss-pxtorem即可：

npm i postcss-pxtorem -D

配置这里和 webpack 很大的不同

<