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"}

参考

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

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


相关文章
|
9天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
109 58
|
19天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
168 2
|
21天前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
31 0
|
1天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
8 4
|
2天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
26 6
|
2天前
|
JavaScript 前端开发 数据可视化
哪些 JS 框架支持 SPA 单页面应用
目前主流的JavaScript框架如React、Vue和Angular都支持SPA(单页面应用)开发,能够实现页面无刷新更新,提升用户体验。其他如Ember.js、Backbone.js等也具备SPA开发能力。
|
4天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
13 4
|
8天前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
|
11天前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
19 1
|
12天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。