vue部署,用户无感知更新问题调研

本文探讨了四种网站更新方案:通过文件hash值实现无感知更新、利用token清除法强制用户重新登录、采用文件名携带时间戳的方法刷新资源以及借助WebSocket进行实时版本检查。其中,第四种方案最为便捷有效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方案1:

文件名带有hash值实现无感发布: 系统更新时,只需要将打包之后的文件除index.html以外的文件(js/css/img),全部上传到服务器网站目录,未修改文件(即重名文件)直接跳过, 有修改的文件由于文件的hash值不同会被上传, 上传完毕我们再将index.html覆盖掉旧版就行。这段时间用户已请求旧版本index.html的无影响(不会出现文件404,因为新旧版本js/css同时存在),而新访问用户则请求的是新版index.html,访问旧页面用户刷新也会请求新版文件,并且无缓存影响,即对用户使用0影响。一段时间之后,我们只需要按文件生成时间对比一下删除旧文件即可。

缺点: 需要nginx 配置上传、删除逻辑

方案2:

token 清除法:系统更新时,清除所用用户的token,使用户身份过期,引导用户重新登录。

缺点:需要后端写清除token 逻辑。

方案3:

文件名带有当前时间:系统更新时,只需要将打包之后的文件除index.html以外的文件(js/css/img), 以 ? 拼接的方式携带当前时间,全部上传到服务器网站目录,所用文件替换原有文件,这段时间用户已请求旧版本index.html的无影响(不会出现文件404,因为新旧版本命名是一致的),而新访问用户则请求的是新版index.html,访问旧页面用户刷新也会请求新版文件,并且无缓存影响。

方案4:

基于WebSocket/ 计时器循环法:使用WebSocket跟服务端建立连接,接收到来自服务端的消息,每次更新后让后端修改版本号,跟本地cookie版本号对比从而判断是否刷新页面或者还有其他操作。

优点:只要发起请求就能得到新版本。

总结:

由于方案123实现起来存在一定难度,方案4类似于消息通知,实现起来快速、便捷。建议使用第四种方案

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜丶陌颜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值