Vue如何实现微前端框架（求大家帮顶，不要下沉）

顺晟科技

2021-06-19 08:09:28

186

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

顺晟科技：

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

自定义一个插件，将所有的样式(存在style标签)，然后保存，并标上目录

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

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

https://segmentfault.com/a/1190000019718750 这是我的其中一个实现方式，看看对你有没有帮助

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

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

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

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

1.页面布局搭个壳子2.闭包,把vue框架闭包->a vue框架代码闭包->b把react框架闭包->c react框架代码闭包->d…3.把闭包填到壳子里.4.完事

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

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

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

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

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

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

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

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

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

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

哎，不知道哪位大牛可以帮忙解决下？

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

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

上一篇：Vue3.0 组件script-se 下一篇：Keep-alive 打开新页面，已

网站建设

Js

Vue如何实现微前端框架（求大家帮顶，不要下沉）