2020年，你可能需要基于Vue的微服务架构实践，在服务端或客户端聚合子服务

快速开始 # 拉取代码 git clone git@github.com:fmfe/vue-genesis-micro.git # 进入项目目录 cd vue-genesis-micro # 安装依赖 npm install # 开发环境启动 npm run dev # 打包生产环境代码 npm run build # 生产环境运行 npm run start 微服务是什么？ 微服务是一个新兴的软件架构，就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务。 为什么需要微服务？ 随着业务的发展，项目规模越来越大，给编译打包、合并的代码冲突带来了巨大的挑战，而服务的拆分可以获得更快的编译打包，独立部署、增量更新、不同的团队只需要负责自己的服务、更好的支持多端，在大型的项目中，使用微服务架构可以获得极大的收益。 微服务和微前端的区别 目前社区的微前端解决方案，基本上都是基于客户端去进行聚合的思路，而本项目却是完全基于后端微服务的概念而诞生的，页面的聚合既可以在服务端完成，也可以在客户端完成，一切取决于需求。 项目介绍 本项目基于 Vue 的Genesis开发，一个编写了三个例子： ssr-common 公共的页面导航 ssr-home 首页 ssr-about 关于我们 在学习完成本项目后，你可以搭建属于自己的微服务架构，并且深入的了解到远程组件它是怎么工作的。至此，你可以做到一个大型应用的微服务拆分下。 关于 Genesis Genesis是在FOLLOWME5.0升级而诞生的一个项目，它解决了以往架构的很多弊端，例如： 公共组件库更新，导致同时十几个项目要编译发布更新 页面和页面之间的切换，需要刷新整页，无法做到无刷新跳转 数百个页面，如果全部写到一个大的项目中做SSR渲染，只要其中一个地方出现BUG，就有可能导致整个服务挂掉或者不稳定，发生内存泄漏的问题时，也更加难以排查 大量的项目是基于CSR渲染，在国际化和SEO方面，导致 index.html 页面的标题、关键词和描述比较难做到国际化 不同的团队，互相交叉开发一个项目，合并代码时，很容易产生各种冲突，服务的拆分后，大大的减少了代码冲突 渲染接口 服务的拆分后，那么服务和服务之间的调用是必不可少的，这里提出了一个渲染接口的概念，它可能是这样子的 // 下面的接口，你可能需要做Nginx反向代理，来做到下面的接口 // /api/ssr-服务名称/render?url=渲染地址&mode=渲染模式&routerMode=路由模式 const renderModes = ['ssr-html', 'ssr-json', 'csr-html', 'csr-json']; /** * 提供一个API允许外部渲染 */ app.use('/api/render', (req, res, next) => { // 获取渲染的地址 const url = decodeURIComponent(String(req.query.renderUrl)); // 获取路由渲染的模式 const routerMode = ['abstract', 'history'].indexOf(String(req.query.routerMode)) > -1 ? req.query.routerMode : 'history'; // 渲染默认 const mode: any = renderModes.indexOf(String(req.query.renderMode)) > -1 ? String(req.query.renderMode) : 'ssr-json'; renderer .render({ url, mode, state: { routerMode } }) .then((r) => { res.send(r.data); }) .catch(next); }); 这样第三方的服务，就可以随意的调用这个服务的渲染结果，传递需要渲染的地方渲染，比如Vue、React、或者其它的EJS模板引擎等等。本项目会使用渲染接口，来传递给远程组件进行渲染。 远程组件 当你需要调用其它服务的页面渲染时，你请求渲染接口，拿到渲染的结果，传递给远程组件，它就会负责帮你渲染该服务的内容。 目录说明 . ├── .vscode │ ├── settings.json vscode的配置 ├── examples 服务拆分的例子 │ ├── ssr-about 关于我们服务 │ | ├── src Vue源码目录 │ | | ├── views 页面目录 │ | | | ├── about-help.vue 帮助中心页面 │ | | | └── about-us.vue 关于我们页面 │ | | ├── app.vue 页面入口文件，公共导航 │ | | ├── entry-client.ts 客户端入口文件 │ | | ├── entry-server.ts 服务端入口文件 │ | | ├── router.ts 路由配置文件 │ | | └── shims-vue.d.ts .vue文件的TS声明 │ | ├── genesis.build.ts 当前服务生产环境构建入口 │ | ├── genesis.dev.ts 当前服务开发环境入口 │ | ├── genesis.prod.ts 当前服务生产环境入口 │ | └── genesis.ts 当前服务通用的服务端逻辑 │ ├── ssr-common 基础的页面聚合服务，包含公共导航 │ | ├── src Vue源码目录 │ | | ├── views 页面目录 │ | | | ├── about-help.vue 帮助中心页面 │ | | | └── about-us.vue 关于我们页面 │ | | ├── app.vue 页面入口文件，公共导航 │ | | ├── container.vue 子应用的容器 │ | | ├── entry-client.ts 客户端入口文件 │ | | ├── entry-server.ts 服务端入口文件 │ | | ├── router.ts 路由配置文件 │ | | └── shims-vue.d.ts .vue文件的TS声明 │ | ├── genesis.build.ts 当前服务生产环境构建入口 │ | ├── genesis.dev.ts 当前服务开发环境入口 │ | ├── genesis.prod.ts 当前服务生产环境入口 │ | └── genesis.ts 当前服务通用的服务端逻辑 │ ├── ssr-home 首页的服务 │ | ├── src Vue源码目录 │ | | ├── views 页面目录 │ | | | └── home.vue 首页页面 │ | | ├── app.vue 页面入口文件，公共导航 │ | | ├── container.vue 子应用的容器 │ | | ├── entry-client.ts 客户端入口文件 │ | | ├── entry-server.ts 服务端入口文件 │ | | ├── router.ts 路由配置文件 │ | | └── shims-vue.d.ts .vue文件的TS声明 │ | ├── genesis.build.ts 当前服务生产环境构建入口 │ | ├── genesis.dev.ts 当前服务开发环境入口 │ | ├── genesis.prod.ts 当前服务生产环境入口 │ | └── genesis.ts 当前服务通用的服务端逻辑 | ├── .editorconfig 编辑器配置 | ├── .eslintignore eslint忽略配置 | ├── .eslintrc.js eslint配置 | ├── .gitignore git忽略配置 | ├── .stylelintignore stylelint忽略配置 | ├── genesis.build.ts 所有服务生产构建 | ├── genesis.dev.ts 所有服务开发环境启动 | ├── genesis.prod.ts 所有服务生产环境入口 | ├── stylelint.config.js stylelint配置 | └── tsconfig.json TS的配置 │ └── package.json 注意：本项目是为了演示，才把几个服务全部放到一个仓库中，在实际的应用中，每一个服务，都应该放到独立的git仓库中。 最后 本项目源码地址：vue-genesis-micro Genesis官方仓库 Genesis文档地址 基于 Vue SSR 的微架构在 FOLLOWME5.0 实践 基于 Vue CSR 的微前端实现方案 如果你对微前端、和微服务这一块感兴趣，欢迎 Star ，也可以在留言区我和互动！

本文章由javascript技术分享原创和收集