带你了解基于 Vue 的微服务解决方案 Genesis

2020-06-28 10:06:46 +08:00
 1340641314

前言

这几年,因为忙于业务,都很少在社区发言了,直到今年要重构整个 FOLLOWME5.0 网站,为了满足业务发展的需要,才设计了 Genesis ,顺势推出了基于 Vue 的微服务解决方案。

在设计之初,不是没有考虑过社区的一些解决方案,但是无一例外的都是基于客户端聚合的微前端解决方案,和我们真正的需求还差之很远。

需求

总结:
我们需要一个可以支持 SSRCSR 渲染的微服务解决方案。

有哪些应用场景?

上面这张图,很好的诠释了 Genesis 微服务的工作原理,以及你使用 Genesis 可以做些什么。

如何避免服务冲突?

样式的冲突,在 Vue 中可以通过 scoped 来解决,全局的变量之类的,就需要通过开发的规范对开发人员进行约束了。

路由管理

和平时普通的使用方式一样,没有什么差别。当你一个页面两个服务都使用了路由时,才需要使用 Genesis 包装后的 vue-router 解决历史模式时,产生多次记录的 bug 。

付费分享

如果你们公司,对本套微服务解决方案感兴趣的话,在深圳地区,可以考虑到贵公司付费的分享一些在 FOLLOWME实践,GitHub 可以联系到我。有钱,我想可以让我更有动力把项目做得更好,毕竟深圳的房子还是太贵了。

传送门

1034 次点击
所在节点    分享创造
8 条回复
zlu1123
2020-06-28 10:18:03 +08:00
技术小白只能膜拜~
1340641314
2020-06-28 10:34:05 +08:00
@zlu1123 互相交流,共同成长。
Asyncway
2020-06-28 12:24:31 +08:00
不懂就问 感觉像是哪里配置错误 执行 npm run dev 报错 使用的是那个 demo

ENOENT: no such file or directory, open '/myUrls/vue-genesis-micro-master/examples/ssr-home/dist/ssr-home/src/entry-client.ts'
1340641314
2020-06-28 14:00:02 +08:00
@Asyncway 你这个是在 window 环境下运行的吗?是最新的代码吗?
我刚才试着跑了一下,没问题。可以贴一下更完整的错误信息来看看。
Asyncway
2020-06-28 14:09:52 +08:00
@1340641314 我是在 mac 环境下跑的 我看上去貌似是 write 模块出了问题


vue-genesis-micro-master % npm run dev

> vue-genesis-micro@1.0.0 dev /xxxx/vue-genesis-micro-master
> ts-node genesis.dev -p=tsconfig.json

(node:69425) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/xxxx/vue-genesis-micro-master/examples/ssr-common/dist/ssr-common/src/entry-client.ts'
at Object.fs.openSync (fs.js:660:18)
at Object.fs.writeFileSync (fs.js:1319:33)
at Function.write.sync (/xxxx/vue-genesis-micro-master/node_modules/write/index.js:101:6)
at writeDistSrcTemplate (/xxxx/vue-genesis-micro-master/node_modules/@fmfe/genesis-compiler/dist/plugins/template.js:52:29)
at TemplatePlugin.beforeCompiler (/xxxx/vue-genesis-micro-master/node_modules/@fmfe/genesis-compiler/dist/plugins/template.js:54:9)
at PluginManage.callHook (/xxxx/vue-genesis-micro-master/node_modules/@fmfe/genesis-core/dist/plugin.js:75:30)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:182:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:697:11)
at main (/Users/gaoya/Documents/code/vue-genesis-micro-master/node_modules/ts-node/src/bin.ts:227:14)
(node:69425) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 7)
(node:69425) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Asyncway
2020-06-28 14:10:27 +08:00
@1340641314 猜测是不是跟 node 版本有关 我的版本为 9.11.0
Asyncway
2020-06-28 14:23:11 +08:00
@Asyncway @1340641314 node 版本切换到 12.18 最新的之后成功编译了
1340641314
2020-06-28 16:11:56 +08:00
@Asyncway 可能有关系,因为我开发的时候,版本都是 12.x 以上的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/685198

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX