nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面

location / {

 expires 1h;
 root /home/test/vue/dist/;
 index index.html index.htm;

 if ($request_filename ~* .*\.(htm|html)$)  ## 配置页面不缓存
 {
     add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
 }

}

当nginx设置了expires后,例如设置为:expires 10d; 那么,所在的location或if的内容,用户在10天内请求的时候,都只会访问浏览器中的缓存,而不会去请求nginx

配置HTML文件不缓存后,每次更新项目,会重新请求页面,前端打包后,在打包工具会自动在文件名上加时间戳、哈希值,这样一发新版时,只要客户端请求了新版的html,里面引用的js/css/jpg等都已经换了路径,也就不会在使用缓存了。

以上nginx配置在实际操作的过程中表现:

1、当用户在系统当中,这时项目发版,用户不会拿到js校验,不去渲染页面相关的改动。比如说:前端只改了js的校验问题,和不会引起整个页面重绘的更改(如:input加一个placeholder),这种情况当用户在系统当中,项目发版后,不刷新页面,用户就拿不到最新更改后的版本。
2、当关闭浏览器,重新打开浏览器登录;用户可以拿到最新更改后的版本。
3、当用户退出登录再次登录时,用户可以拿到最新更改后的版本。
Logo

前往低代码交流专区

更多推荐