Vue项目打包后如何避免用户访问旧页面？

Z时代
2024-02-07
分类：IT

问题:
vue项目" title="vue项目">vue项目打包，静态资源文件名都加了hash值，每次更改文件重新打包，hash值也改变了，但是部署上线后，依然有部分用户刷新访问还是旧的页面;

背景：
服务器是nginx，nginx是默认配置，并没有设置expires,cache-control这些缓存标识头。html meta标签http-equiv属性也没有设置先关缓存。网站应该走的是浏览器默认缓存，也就是启发式缓存。

通过chrome控制台调试发现：

1.首次访问网站index.html文件响应头带以下属性：

HTTP/1.1 200 OK
Server: nginx/1.23.4
Date: Fri, 12 Jan 2024 06:37:33 GMT
Content-Type: text/html
Content-Length: 1936
Last-Modified: Mon, 08 Jan 2024 10:18:12 GMT
Connection: keep-alive
ETag: "659bcbe4-790"
Accept-Ranges: bytes

2.第二次访问，index.html走的是304 协商缓; js,css,img这些资源走的是200。
index.html请求头：

Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding:
gzip, deflate
Accept-Language:
zh-CN,zh;q=0.9
Cache-Control:
max-age=0
Connection:
keep-alive
Host:..*.5
If-Modified-Since:
Mon, 08 Jan 2024 10:18:12 GMT
If-None-Match:
"659bcbe4-790"
Upgrade-Insecure-Requests:
1
User-Agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36