我们都知道，对于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如何实现热更新的更多相关文章

  1. vue系列之webstrom开发vue，无法热更新

    用vue-cli构建了项目之后在webstorm开发,用npm run dev跑本地服务,经常修改之后在浏览器刷新没反应,偶尔才会有刷新,需要重新跑一遍npm run dev才会更新,这是怎么回事呢? ...

  2. BrowserSync 热更新的使用(保存后自动刷新）

    BrowserSync使用的优点,BrowserSync监听条件中的文件,发现更新会立刻刷新浏览器,就像 vue中的热更新一样,解放F5实现自动更新,提高开发效率, 解决了使用双屏幕时来回切换的烦恼! ...

  3. Webpack与Vite热更新差异对比

    随着项目的日渐迭代,项目整体的代码量也会越来越多,从而导致项目体积越来越大:在Webpack时代,很多人会对历史项目(巨型项目)感到头疼,因为往往巨型项目在本地开发调试的时候会因为本地代码的修改触发H ...

  4. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  5. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架（下篇——多页面VueSSR+热更新Server）

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...

  6. Vue热更新报错（log.error('[WDS] Errors while compiling. Reload prevented.')）

    log.error('[WDS] Errors while compiling. Reload prevented.');中的WDS其实是webpack-dev-serverwebpack的意思,用来 ...

  7. vue 无法热替换/热更新

    参考了小伙伴的解决办法: 1.https://blog.csdn.net/win7583362/article/details/65443291 虽然我并不是用对方的方法解决的. 依然还是建议大家打开 ...

  8. vscode开发vue，热更新

    1.首先用vscode去安装热更新插件 2.vscode安装后默认修改的文件是没有开启自动保存的,需要将自动保存勾选 这样就不用每次修改都去open with live server:

  9. iOS热更新-8种实现方式

    一.JSPatch 热更新时,从服务器拉去js脚本.理论上可以修改和新建所有的模块,但是不建议这样做. 建议 用来做紧急的小需求和 修复严重的线上bug. 二.lua脚本 比如: wax.热更新时,从 ...

随机推荐

  1. css文件分类

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...

  2. ssky-keygen + ssh-copy-id 无密码登陆远程LINUX主机【OK】

    ssky-keygen + ssh-copy-id 无密码登陆远程LINUX主机[OK]     使用下例中ssky-keygen和ssh-copy-id,仅需通过3个步骤的简单设置而无需输入密码就能 ...

  3. hiho #1308 : 搜索二·骑士问题

    #1308 : 搜索二·骑士问题 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi:小Ho你会下国际象棋么? 小Ho:应该算会吧,我知道每个棋子的移动方式,马走日象 ...

  4. 在github新建一个项目里需要哪些文件及作用

    1.README.md文件 关于项目的介绍和使用方法. 2.  .gitignore文件 上传项目时不需要传的文件,最常用的就是“node_modules/",如下: 详细的介绍可以去git ...

  5. NURBS 曲线和曲面参数化

    NURBS 曲线和曲面参数化 什么是参数? 参数是曲线或曲面上点的唯一数值(类似于坐标).通过参数,可以沿曲线的长度方向引用特定点.参数值越大,点在曲线方向上的距离越远. 就像空间中的点具有三个维度( ...

  6. 如何下载Direct3D9Ex

    其实就是DirectX june_10月版本,下载链接如下 DirectX Software Development Kit 错误:安装报错“S1023" 若要解决此问题,必须在安装2010 ...

  7. sklearn pca降维

    PCA降维 一.原理 这篇文章总结的不错PCA的数学原理. PCA主成分分析是将原始数据以线性形式映射到维度互不相关的子空间.主要就是寻找方差最大的不相关维度.数据的最大方差给出了数据的最重要信息. ...

  8. （转译）2019年WEB漏洞扫描工具和软件前十名推荐

    这些工具都有助于发现漏洞,从而最大限度地提高测试人员的时间和效率.这些工具,2019年更新,也可用于寻找漏洞. 为何扫描? 这资源是什么? Web应用程序对黑客具有极大的吸引力,并且出于百万种不同的原 ...

  9. python学习之路（19）

    匿名函数 当我们在传入函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方便. 在Python中,对匿名函数提供了有限支持.还是以map()函数为例,计算f(x)=x2时,除了定义一个f(x) ...

  10. TensorFlow自动求梯度

    例1 import tensorflow as tf a=tf.Variable(tf.constant(1.0),name='a') b=tf.Variable(tf.constant(1.0),n ...