vue项目如何实现微前端架构？ 标签hello world
公司现有多个项目上线，现在需要将这些独立开发、部署的项目进行聚合，从视觉上看，就像是一个项目，有登录页，主页有导航，导航里面包含二级、三级导航。但实际上，整个前端的项目，目前都是独立运行的，分别都有登录，现在要求就是想在整体看上去是一个项目，能够通过这些二级三级导航，去看到子项目中不同的页面。目前我司采用的方案是iframe，把每个页面都通过url的方式在主项目中用iframe进行整合(url是保存在资料库中的)。总感觉这种方式不太好，目前市面上有web components、single-spa等，经过调研，也不能完全支撑我们的开发，现在想请教一下还有没有其他方案
一行命令即可为你的 Vue 项目接入 Qiankun 框架，实现微前端架构
F-loat/vue-cli-plugin-qiankun?github.com
提取一个公共的header.js文件，作为一个独立的包发布。存在多个spa项目，菜单都通过header.js渲染出来，在单个spa内跳转时是属于前端路由；通过菜单切换多个spa时，是属于后端路由。所有的项目划分到不同的二级子域下面，许可权管理通过sso顶级域名管理，解决登录问题。
各个项目之间天然隔离，也不会存在副作用。唯一需要维护的是菜单配置，建议统一拉取一个固定url配置文件更新，菜单配置文件更新后，所有项目同步更新。
特别有名的一个项目可以参考阿里云，基本上所有的路由都在二级子域下面跳转，最终解决了多项目发布上线管理问题，同时保证系统整体一致性。
我来讲一下FOLLOWME的吧。
今年上半年，团队内部沉淀出来了一个基于 Vue 的SSR库Genesis，有力的支撑了在FOLLOWME5.0 架构中，对于前端微模块、微应用、微前端和微服务化的需求。
微模块
一个服务，可以提供一小块内容，提供给其它服务调用，比如，它像是下面这样的。
一个独立的服务，提供了一个API的介面，由另外一个服务，通过远程组件去调用这个服务提供的微模块。
微应用
一个独立的，完整的业务模块，可以看出是一个独立的微应用，比如它可能是下面这样子的。
微前端
由一个基础的聚合服务，载入各个子应用，最终呈现出来一个完整的页面，它是这样子的。
左边由基础服务提供通用的导航，内容区在首屏的时候在服务端远程载入，生成完整的html。
在客户端切换路由的时候，再动态的请求其它子应用的数据，走CSR渲染，然后呈现出来，整个过程都是无刷新的。
从首页跳转到信号模块的时候，发起请求拿到该服务的 CSR JSON，返回给远程组件进行渲染。
微服务
在FOLLOWME5.0 之前，APP端和WEB端同样的业务，分别维护著两套的代码，导致维护的成本攀升。它的架构大概是这样子的
注意，上面的图是前端的微服务化，每个子服务，都可以提供 SSR 渲染和 CSR 渲染，然后由聚合服务调用子服务，生成完整的 HTML 返回到客户端。
对了，我司的微前端、微服务支持的 SSR 库已经开源出来了。附上地址：
fmfe/genesis?github.com
如果你在使用的过程中，遇到问题，随时可以提 issues。
楼上说的有道理，多个 spa 组成的多页应用就可以，这样做可以解决，重点是怎么管理每个页内的单页，每个页内spa更新都提mr由总负责人集中审核先过渡一下好像可以解决，其实这个过程最重要的还是协同问题、代码的重复性问题；
总结就是要分成架构组和业务组，外部架构组提供通用组件、通用模块等；每个页内 spa 拼砖块就完了，有通用的就继续提 mr 合吧；各个项目把登录，导航在样式风格上保持一致性，所有项目还是各自部署，然后做nginx反向代理；
比如：www.abc.com/a 就代理到A项目，www.abc.com/b 就代理到B项目
由多个spa组成的多页应用， 也许可以解决你的需求
既然用的是vue，开发编译时利用html in js，然后部署，聚合页面引入这些部署的js，css解析就能显示，接下来考虑的就是js隔离css隔离，保证逻辑和样式互不影响，接下来就是造沙箱，保证一个业务页面崩了之后其他的没影响，问题来了各位大佬谁有过造沙箱的经验啊
还要考虑一个页面上使用多个一样的业务页面，初始化参数不同
js隔离之外还要建立前端消息汇流排，能够联动……
这个问题我是这么解决的，简单一点关键点A：共用测目录组件B：目录从后台读取C：Jekins先打包子工程，再去通过脚本把打包出来的子工程资源拷贝到主工程当中，再构建主工程，之后可以启动服务，压缩资源工程归档，都是通过在jekins写脚本实现的
https://zhuanlan.zhihu.com/p/48628208
【疑惑】之前用Jquery，layui框架做的单页面项目如何集成到乾坤框架啊？
比如一个简单的单页面index.html，&
标签hello world
虽然可以集成进去，但提示： Application home died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in home entry。
loading状态也不能消失。
推荐阅读：
