vue项目强制清除页面缓存的例子
2019-12-02 18:11
3319 查看
异常描述:
支付宝中内嵌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配置如下:
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项目强制清除页面缓存的例子就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- Vue项目全局配置页面缓存之按需读取缓存的实现详解
- vue项目动态设置页面title及是否缓存页面的问题
- oscache如何缓存页面及如何强制清除指定页面的缓存
- asp.net 页面清除缓存
- vue2.0页面缓存和不缓存的方法
- 【Laravel】项目中清除缓存失败
- 清除页面缓存
- ASP.NET几种清除页面缓存的方法
- 10(maven+SSH)网上商城项目实战之页面缓存OSCache
- web页面嵌入应用中遇到的 Object.entries is not a function 问题的解决(vue项目)
- ASP.NET清除页面缓存
- 用编程来实现清除aspx页面缓存
- 浅谈Vue页面级缓存解决方案feb-alive (下)
- 详解keep-alive + vuex 让缓存的页面灵活起来
- 清除jsp页面缓存
- vue+webpack项目中px2rem的例子
- JSP 页面缓存以及清除缓存
- Vue-cli创建项目从单页面到多页面
- 清除ASP.NET页面缓存
- 使用vue的时候我们使用keep-alive会将页面缓存的解决方法