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

参考

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

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


相关文章
|
23天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
119 58
|
17天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
10天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
24 3
原生js炫酷随机抽奖中奖效果代码
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
163 4
|
17天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
66 6
|
17天前
|
JavaScript 前端开发 数据可视化
哪些 JS 框架支持 SPA 单页面应用
目前主流的JavaScript框架如React、Vue和Angular都支持SPA(单页面应用)开发,能够实现页面无刷新更新,提升用户体验。其他如Ember.js、Backbone.js等也具备SPA开发能力。
|
13天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
41 1
|
20天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
19 7