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">
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css?v=20200110052406">
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/addStyle.css?v=20200110052406">
   <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/template/addStyle.css?v=20200110052406">

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