vue项目强制清除页面缓存

异常描述：

支付宝中内嵌h5项目（vue框架开发），前端重新打包上传之后访问页面会导致页面空白、页面tab点击异常之类异常情况，需要手动清除支付宝缓存才可以正常访问。

解决方案：

在HTTP协议中，只有后端返回 expires 或 Cache-Control:max-age=XXX， 前端才缓存。
但在浏览器中，默认会对 html css js 等静态文件、以及重定向进行缓存，如果在HEAD头中指定：

<HEAD>
<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
<METAHTTP-EQUIV="Expires"CONTENT="0">
</HEAD>

浏览器不会缓存html，但是还是会对重定向缓存，并且这种方式并不规范，可能有的浏览器不支持。
我的最终解决方案是：
1） 对hash过的静态文件还是采用默认方式，客户端会缓存。
2）对html文件，返回时增加头：Cache-Control，必须每次来服务端校验，根据etag返回200或者304
对应的nginx配置如下：

 1 upstream example-be {
 2 　　ip_hash;
 3 　　server unix:/run/example-be.sock;
 4 }
 5 server{
 6 　　listen 80; #监听端口
 7 　　server_name example.com
 8 
 9 　　# 后台api
10 　　location ~ ^/api {
11 　　　　proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
12 　　　　include uwsgi_params;
13　　　　 uwsgi_pass example-be;
14　　 }
15 
16 　　# 前端静态文件
17 　　location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
18 　　　　root /var/www/example-fe/dist/;
19 　　}
20 
21 　　# 前端html文件
22 　　location / {
23 　　　　# disable cache html
24 　　　　add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
25 
26 　　　　root /var/www/example-fe/dist/;
27 　　　　index index.html index.htm;
28 　　　　try_files $uri /index.html;
29 　　}
30 }

由于浏览器缓存静态文件的时间不可控，我们可以在nginx上自己配置expires 1M（1个月）
# 前端静态文件

1 location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ {
2 　　root /var/www/example-fe/dist/;
3 　　expires 1M;
4 　　add_header Cache-Control "public";
5 }

 

posted on 2019-02-25 15:30  逍遥云天  阅读(57469)  评论(0)  编辑  收藏  举报

导航