解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题

更新时间：2024年01月24日 16:21:53 作者：Queen_live

这篇文章主要介绍了解决nginx服务器上发布的新版本代码总需要清除浏览器缓存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题场景

代码运行环境：nginx
现象：发布新版本代码时浏览器总是有上次缓存
结果：页面显示混乱、更新的功能还是上个版本等一系列问题

原因

浏览器缓存

解决方法

1. 用户自行清理浏览器缓存

优点：清除浏览器缓存后可达到效果。
缺点：影响用户体验

2. 使用禁用缓存标签，实现禁用浏览器缓存

优点：可达到效果。
缺点：每次请求页面都要重新请求，我们还是希望有缓存的

   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
   <meta http-equiv="Cache" content="no-cache">
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />

3. 为js和css文件添加版本号

优点：可达到效果。
缺点：给所有的静态资源都添加版本号参数，这个参数可以是时间戳或者随机数。

处理方式的代码如下：

   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/layui-v2.5.5/layui/css/layui.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/addStyle.css?v=20200110052406" rel="external nofollow" >
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/template/addStyle.css?v=20200110052406" rel="external nofollow" >

4. 修改nginx 配置

（满足以下条件后有缓存可以修改nginx 配置文件）

背景：

1、使用nginx做代理

2、使用webpack等打包出一个唯一的入口文件index.html，或者其他方式的入口html文件

3、入口html文件中js已经使用hash后缀方式加载

=缺点：需要前端人员会配置nginx=

location ~ .*\.(htm|html)?$ {
 #原来这样设置的不管用
 #expires -1;
 #现在改为，增加缓存
 add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
 access_log on;
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

利用nginx和腾讯云免费证书制作https的方法
这篇文章主要介绍了利用nginx和腾讯云免费证书制作https的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
Nginx 日志改成 JSON 格式的方法
下面小编就为大家分享一篇Nginx 日志改成 JSON 格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
nginx配置gzip压缩优化传输效率加快页面访问速度的问题
本文介绍了如何在nginx服务器中配置gzip压缩,通过压缩HTTP响应内容,减少数据传输大小和响应时间,从而提升网站性能和访问速度,感兴趣的朋友跟随小编一起看看吧
2024-09-09
Nginx将http转换成https的详细过程
相信大家在现有项目里都会通过https访问,这篇文章主要给大家介绍了关于Nginx将http转换成https的详细过程,文中将实现的方法介绍的非常详细,需要的朋友可以参考下
2022-05-05
nginx去掉前端配置的路径前缀两种情况
今天接到一个配置nginx的需求是,需要访问某个域名时,nginx可以去掉前缀去代理访问到后端,这篇文章主要给大家介绍了关于nginx去掉前端配置的路径前缀的两种情况,需要的朋友可以参考下
2024-05-05
详解Nginx的核心配置模块中对于请求体的接受流程
这篇文章主要介绍了详解Nginx的核心配置模块中对于请求体的接受流程,包括其丢弃请求的过程,需要的朋友可以参考下
2015-12-12
Nginx设置HTTPS的方法步骤
本文主要介绍了NGINX设置HTTPS的方法步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
安装Windows版nginx及部署前端代码并解决刷新出现404问题
这篇文章主要给大家介绍了关于安装Windows版nginx及部署前端代码解决刷新出现404问题的相关资料,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下
2023-12-12
Nginx 502 Bad Gateway错误原因及解决方案
这篇文章主要介绍了Nginx 502 Bad Gateway错误原因及解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
深入理解Nginx之error_page模块的使用
error_page是nginx一个重要的指令,作用是定制化服务器错误页面,本文主要介绍了Nginx之error_page模块的使用,具有一定的参考价值,感兴趣的可以了解一下
2023-09-09