Vue如何实现微前端框架(求大家帮顶,不要下沉)

由于我所在的公司非常大,前端有各种框架,例如vue,react,angular,服务端应用已经拆分的非常薄,但是前端应用却是SPA居多,这样前端应用就非常臃肿,有没有办法拆分前端应用,最后组合在一个网站中呢?也查了些资料,有些解决方案,感觉都不是很优雅。下面是我查到的资料,微前端概念首先由ThoughtWorks提出,刚好说的就是我这个问题。

哎,不知道哪位大牛可以帮忙解决下?

1 Like

帮顶,看到你这个帖子 就去搜了。看到有说用ifreame的???我是没有搞懂

  1. 我的 DOM 你别动(每个「模块」都有唯一的根元素,模块之间互不干扰,<body> 下只有模块)
  2. 你的样式不要影响到我(CSS Modules 或其他此类方案可破)
  3. 我的命名空间你别访问(每个模块的数据对象相互独立且外界不可访问)

对于 Vue 来说,第1点天然符合,与其他模块约定不要修改本模块的 DOM 即可;第2点就是一个 <style module> 的事儿;第3点,普通 Vue 组件本身就符合要求,Vuex 在独立的 Vue 根组件的前提下也符合要求。

<body> 内容的修改谨慎决定,修改前讨论;window 下全局变量非必要禁止访问。这样单一模块的关注范围就局限到了某个 DOM 节点和某个顶级变量下,应该不难了?

4 Likes

IFrame 是一个简单粗暴的方式,因为 IFrame 天然生成一个相对隔离的上下文环境,不用考虑太多状态污染的问题。但 IFrame 有其他的问题,这个要看取舍了。

他的思想不仅仅局限在vue上,他有点类似一块土地上,你可以种vue 也可以种angular 也可以种jquery也可以react,前端微服务就是这块地把他们都整合起来了,我种vue的 只管我的长好结果实就好了,你的angular不要影响我,我也不关心,我们之间可能需要数据共享或者是数据传递。这个我也是看了部分文章。不过好像没有后端的微服务成熟。

这个其实是有好处的,只是不知道有没有什么成熟的方法

目前没有看到一套「框架」可以快速地实现这个需求。后端实现微服务,各单元之间通过协议来通讯;而同样的场景到了前端,难道各自起 Worker 发 Message?听起来有点滑稽。靠全局变量来交换数据的话,数据的定义和更新通知又成了问题(除非大家都用 RxJS 来发数据,看上去还合理一些)。所以前端若想像后端那样实现「微架构」,目前还不太现实。

如果降格来考虑这个需求,只是希望不同的框架能相对融洽地工作于同一个页面上的话,隔离开 DOM 操作和变量命名空间就可以了。至于各单元间的数据交流……定义一个框架无关的数据组件来实现(就像 Redux/Vuex 那样)。

嗯嗯,是的。我也是偶然看到 随便了解了解。

关注一下,最近在研究怎么把多个spa融合的问题。

没有使用VUE全家桶,的WebPack如何将.vue中的样式提取出来

分享一个vue投票网站http://www.sucaihuo.com/templates/3711.html

楼主,你好,请问解决这个问题了吗。前端各个spa整合在一起,而且需要数据通信。我现在也遇到这个问题了。如果全做在一个spa里面,我估计会很大。

我想的意思是 能不能都通过webpack打包 然后变成独立的模块 前端通过请求去获取需要的依赖 这样的话系统都可以做到动态组装 数据通信 可以用类似vuex这种 当然 每个模块 每种框架 可能数据存储方式都不相同 所以能不能提供一种通用的存储方式 把他们继续做一层封装

在加载的事情上,Dynamic import 是个解决方案,浏览器支持情况也还可以(还差 Firefox 和 Edge),主要问题在于如何让社区(第三方库的作者)迁移到 ESM 上。Node 暂时还不支持,但问题不算太大。

数据通信的事情上,问题就大了,不同库的要求千差万别,要想做到统一通用实在不现实。一个可以考虑的方案是利用环境 API(比如 Storage API 什么的),但一来限制较大,二来也不灵活。所以总归还是要降到业务层面自行封装。至于数据结构,JSON 呗(这其实是句废话)。

1 Like

1.页面布局搭个壳子
2.闭包,把vue框架闭包->a vue框架代码闭包->b
把react框架闭包->c react框架代码闭包->d

3.把闭包填到壳子里.
4.完事

楼主,问题解决了吗?遇到类似的问题了,前端需要拆分成微服务,分开部署,互不影响

我们做了个类似的,把原来做好的模块打包部署到某个url,然后通过 iframe 访问,但有点太挫。

有个框架可以解决叫single-spa https://single-spa.js.org/ 就是相关文档比较少