当前位置: 首页 > 知识库问答 >
问题:

javascript - 前端项目部署,想要自动检测更新后通知用户刷新页面,但是发版后main.js入口文件不调用为什么?

施子民
2024-01-11

想实现,"前端项目部署自动检测更新后通知用户刷新页面".但是发版后,main.js入口文件并不再次执行是为什么?
在main.js引入了version版本比较,但是发版之后,浏览器页面并不会自动再次执行main.js,导致用户如果之前一直在老页面,即便我发版,他也更新不到.

我是用oss发版的,文件名字hash我也做了处理,但是为什么引用文件名字都变了,浏览器还是老页面吗呢,不去读最新的资源文件这是老页面 引用的js文件这是新页面加了hash的文件名
但是项目页面如果不刷新(下图是老页面读的),一直停留在老页面,他就一直访问老页面js,导致我的版本更新代码他读不到
项目老页面引用的
这种我要怎么处理

共有2个答案

暴辰龙
2024-01-11

盲猜企业微信,伟大的企业微信连 html 文件都给缓存了。
我的解决方案是:外层 html 只负责检测版本号并拼接最新版的 URL,应用套在 iframe 里面。
当然最正宗的解决方案是让后端配置缓存策略。

贺跃
2024-01-11

你遇到的问题是因为浏览器缓存了旧的 JavaScript 文件。当你的前端项目部署后,新的 JavaScript 文件已经被生成并放在了服务器上,但是因为浏览器的缓存,用户可能仍然会加载旧的、缓存的版本。

要解决这个问题,你可以采取以下几种方法:

  1. 使用版本号或查询参数: 在 JavaScript 文件的 URL 中添加一个版本号或查询参数(例如,main.js?v=1.0.0),这样每次更改版本时,URL 都会变化,导致浏览器认为这是一个新的文件并重新下载。
  2. 强制刷新: 在你的通知用户刷新页面中,可以加入一个强制刷新操作。例如,你可以在通知中提供一个链接,链接的 URL 中加入了一个随机数或时间戳,这样每次点击链接时,URL 都会变化,从而触发浏览器重新加载页面。
  3. 使用 Service Worker: Service Worker 可以拦截网络请求,并在本地缓存文件。你可以编写一个 Service Worker,让它检测文件是否更新,如果文件已更新,则强制加载新文件。
  4. 使用 OSS 的缓存控制策略: 如果你使用的是 OSS(一种对象存储服务),你可以设置文件的 HTTP 缓存控制头,例如 Cache-ControlExpires,来控制浏览器如何缓存文件。例如,你可以设置一个较短的有效期,这样浏览器就不会长时间缓存文件。

这些方法中的每一种都有其优缺点,你需要根据你的具体情况选择最适合的方法。

 类似资料:
  • 我有一个Java Maven项目,在pom.xml文件中定义了一些依赖项。这些依赖项往往每个月都有较新的版本,所以我想部署一个JAR文件,在每次启动中自动检查那些依赖项的最新版本(而不需要重新构建Java Maven项目)。 有可能用Maven实现这一点吗? 我知道Versions Maven插件对于下载依赖项的最新版本是有用的,但仅当“重新构建”项目时(而不是在部署的JAR中)。我还知道我可以使

  • 为什么在刷新页面后重新提交 去http://qass.im/message-envelope/ 并上传任何文件,但仅限文本"gif","jpeg","jpg","png","zip","pdf","docx","rar","txt" 上传后点击F5按钮刷新页面 现在重新提交并重新上传文件! 为什么呢? 我想在上传文件后禁用重新提交而不使用jquery

  • vue项目新版打包部署后,过一段时间刷新网页,一直加载不出,但关掉浏览器之后再次打开才会正常,一般在项目部署的时候,才会复现(有的电脑会有这种问题,有的正常),请问是什么原因引起的?

  • 我尝试使用localStorage保存输入元素的位置。我保存了输入元素的位置,在重新加载页面后,我可以访问它,但在刷新页面后,它始终处于默认位置。(值真/假) HTML: JS: 明确地说,我正在创建chrome扩展(选项页)。 编辑:

  • uniapp项目如何监听页面刷新

  • 有没有办法禁用某些现代浏览器(Chrome和Safari)在刷新页面时记住滚动位置的行为?