js:Vue单页面应用SPA项目代码更新提示用户刷新页面

简介: js:Vue单页面应用SPA项目代码更新提示用户刷新页面

开发Vue单页面应用SPA项目的时候发现问题,如果用户已经打开网页,后续的访问都只会请求接口,不会再刷新页面。这样导致用户没有获取到我们线上新的代码。

解决思路有很多

  • 直接请求index.html检测script文件hash值,这种方式不需要增加额外的文件
  • head检查index.html的更新时间etag值,需要服务端开启缓存
  • 可以每次代码打包的时候生成一个版本号文件version.json,程序检测到有新的版本号就提示用户刷新页面

还有一个问题是检测时机

  • 定时轮询检测
  • 适当的时机触发,比如用户切换路由

示例

$ echo "{\"version\": \"$(date +%s)\"}" > version.json
$ cat version.json
{"version": "1673926634"}

参考

前端重新部署如何通知用户刷新网页?

前端发版更新提示(不需要后端)


相关文章
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的网上手机销售系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的网上手机销售系统附带文章和源代码设计说明文档ppt
5 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的生鲜在线销售系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的生鲜在线销售系统附带文章和源代码设计说明文档ppt
5 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的经典电影推荐网站附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的经典电影推荐网站附带文章和源代码设计说明文档ppt
5 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的餐馆点餐系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的餐馆点餐系统附带文章和源代码设计说明文档ppt
6 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的影视创作论坛附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的影视创作论坛附带文章和源代码设计说明文档ppt
7 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的航空票务推荐系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的航空票务推荐系统附带文章和源代码设计说明文档ppt
5 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的仓库管理系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的仓库管理系统附带文章和源代码设计说明文档ppt
4 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的智能社区管理系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的智能社区管理系统附带文章和源代码设计说明文档ppt
4 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的高校勤工助学系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的高校勤工助学系统附带文章和源代码设计说明文档ppt
5 0
|
22小时前
|
JavaScript Java 测试技术
Java项目基于ssm+vue.js的餐厅点餐系统附带文章和源代码设计说明文档ppt
Java项目基于ssm+vue.js的餐厅点餐系统附带文章和源代码设计说明文档ppt
4 0