今天就跟大家聊聊有关怎么在vue项目中强制清除页面缓存,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
解决方案:
在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配置如下:
upstream example-be { ip_hash; server unix:/run/example-be.sock; } server{ listen 80; #监听端口 server_name example.com # 后台api location ~ ^/api { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; include uwsgi_params; uwsgi_pass example-be; } # 前端静态文件 location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ { root /var/www/example-fe/dist/; } # 前端html文件 location / { # disable cache html add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0'; root /var/www/example-fe/dist/; index index.html index.htm; try_files $uri /index.html; } }
由于浏览器缓存静态文件的时间不可控,我们可以在nginx上自己配置expires 1M(1个月)
# 前端静态文件
location ~* \.(gif|jpg|jpeg|png|css|js|ico|eot|otf|fon|font|ttf|ttc|woff|woff2)$ { root /var/www/example-fe/dist/; expires 1M; add_header Cache-Control "public"; }
看完上述内容,你们对怎么在vue项目中强制清除页面缓存有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联成都网站设计公司行业资讯频道,感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页题目:怎么在vue项目中强制清除页面缓存-创新互联
当前URL:https://www.cdcxhl.com/article48/hjjep.html
成都网站建设公司_创新互联,为您提供定制网站、电子商务、网站设计、动态网站、域名注册、企业建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联