我们都知道,对于node来说,前端vue代码的迭代节奏是很快的,可能一周要迭代几次,但是node的迭代却没那么平凡,可能一周更新一次甚至更久,那么为了node服务的稳定,减少node服务的发布次数,是非常有用的。 配置中心是肯定需要的,因为需要通过配置不同的资源版本号,来通知node服务更新服务上的版本号 那么 我们的vue代码 要如何改造才能实现热更新呢? 我们就以vue官方给的例子来看
以下代码是我截取的两段代码官方案例:
首先他定义了一个createRenderer的方法
里面调用的是vue-ssr的createBundleRender方法来创建的渲染函数

 

然后传入了使用了三个文件,template.html bundle.json 和clientmanifest.json

 

这里可以看到 在createRender的时候 传入的clientMainfest bundle 都是reqire的 那么有同学会想,我要支持热更新 是不是根据require的缓存机制,去定时的清理缓存?虽然也能实现但是其实不用的 我查询了官方的api文档,其实bundle支持三种参数

 

然后再看下vue的源码,如果传入的是一个绝对路径,类似于上面这个案例 require某个dist目录下的bundle.json文件的时候 做了什么处理

 

它判断 如果是一个js 或者json文件路径的 那么 他会先读取这个文件,然后通过json转化一下成对象,然后再走下面的判断是否是oject逻辑 那么,我们不是可以替他做这个事情嘛 我们可以从远程读取到bundle文件 然后将他转化成bundle 然后传入给createBundleRender方法 就可以不用通过require方法去获取了 然后远程bundle文件加上版本号,就可以实现通过配置来热更新

 

vue项目与node项目分离

为了前后端分离,我们在前端和api层中间,架构了一层node层,用来做服务端渲染,来加快用户的首屏可用和对搜索引擎的友好。项目一开始放置在同一个git仓库里面,分别放在client目录和server目录中(或者类似于vue 官方例子中的一样,node服务可能只有一个sever.js。因为server中可能需要client中的一些资源,所以不得不将他们放在一起。后来通过配置中心驱动之后,client 和server 可以完全独立,通过配置中心建立连接。所以完全可以将client项目和server项目分离开。