vue单页面网页端

项目前言（缓存）

项目之前已经通过webpack打包的时候都会把静态资源文件名加个哈希后缀，且index.html中引入的时候也加了相应的哈希后缀，这样每次打包都会是最新的，index.html文件也通过Nginx添加了不缓存配置

场景需求

已经上线的项目要配合后端更新前端逻辑、修改某个功能。

根据前面的说的客户新进入的不用考虑肯定是最新的代码，问题就出现在正在使用网站的用户代码没有更新过来。

方法

简单粗暴让用户客户端刷新页面。分享三种用过的方法

websocket

原理：使用WebSocket跟服务端建立连接，接收到来自服务端的消息，每次更新后让后端修改版本号，跟本地cookie版本号对比从而判断是否刷新页面或者还有其他操作。

计时器循环请求接口

原理：每次更新后让后端修改版本号，axios请求获取版本号的接口返回版本号跟本地cookie版本号对比判断是否刷新页面并隔相应秒数后再请求。

前端计时器对比index.html差别（只需前端）

原理：请求网站根页面index.html 返回最新index.html页面内容，再使用md5获取当前index.html的数字签名跟本地cookie进行对比就可以进行相应的操作判断

结语

其实还可以针对build后在webpack里的configureWebpack搞自己的插件或者push仓库后自动更新里多加一个修改版本号的操作。针对后端比较忙/懒的情况下建议还是自己搞比较爽。

vue前端打包更新后客户端自动更新相关推荐

wsus服务器推送指定的补丁,【补丁更新】组策略实现WSUS客户端自动更新
使用组策略来管理 WSUS 自动更新客户端下载.安装和重新启动行为可以配置 Windows Server Update Services (WSUS) 客户端来提供最符合您的环境和业务需求的更新安装 ...
Ubuntu18.04重启后内核自动更新显卡驱动失效
Ubuntu18.04重启后内核自动更新显卡驱动失效最近一次重启服务器,发现显卡驱动不见了.网上找了很多办法,原因就是因为重启后内核更新,导致内核版本和Nvidia显卡驱动版本不一致造成的.大致整理 ...
word中给论文标参考文献和文献序号变化后的自动更新
@word中给论文标参考文献和文献序号变化后的自动更新TOC 论文中参考文献的标注问题,整理出方法后面的童鞋以后避坑 1.文献采用word自动编号,菜单栏单击插入,选择交叉引用,选择相应的文献插入,如 ...
华硕笔记本系统更新后开机自动蓝屏怎么U盘重装系统？
华硕笔记本系统更新后开机自动蓝屏怎么U盘重装系统?有用户将自己的华硕笔记本进行系统升级之后,遇到了开机自动蓝屏的情况.遇到这个问题我们怎么去进行解决呢?接下来一起来看看怎么通过U盘重装系统的方法解决此 ...
Vue项目保存代码之后页面自动更新
Vue项目保存代码之后页面自动更新想要在代码中保存之后,页面自动刷新. 命令行敲如下代码 npm install webpack-dev-server 下载了这个东西就不用每次都手动刷新了,我也不知 ...
电脑时间校对后不自动更新要如何解决
电脑右下角的时间不准确,通常我们都会手动给它校正好,但是有的朋友在校对后发现不自动更新了要如何解决呢?针对这类问题这里就和大家聊聊电脑时间校对后不自动更新要如何解决吧. 还有更详细的一键重装系统方法 ...
ant design vue treeDefaultExpandAll 更换数据后没有自动展开
ant design vue treeDefaultExpandAll 更换数据后没有自动展开,找了官网,看到也没什么解决办法在vue当中,所以只好这样子做原理很简单,就是销毁tree-sele ...
ruoyi-UI （若依）微服务版 vue前端使用及分析（2021-4-13更新）
ruoyi-UI (若依) 微服务版 vue前端版本使用及分析(2021-4-13更新) 文章目录 ruoyi-UI (若依) 微服务版 vue前端版本使用及分析(2021-4-13更新) 1. 目录 ...
uniapp打包安卓APP实现自动更新（更新app）
先列出需要注意的地方,避免新手朋友们出错如果uniapp运行app报错:ReferenceError: plus is not defined ,普通浏览器里没有plus环境,只有HBuilder真 ...

vue前端打包更新后客户端自动更新