vue项目强制清除页面缓存的例子
更新时间：2019年11月06日 08:56:01 作者：逍遥云天
今天小编就为大家分享一篇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配置如下：
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动态改变背景图片demo分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文通过实例代码给大家介绍了基于vue2.0实现仿百度前端分页效果,在文中给大家记录了遇到的问题及解决方法，需要的朋友可以参考下2018-10-10
全局事件总线就是一种组件间通信的方式,适用于任意组件间通信,下面这篇文章主要给大家介绍了关于Vue2中如何使用全局事件总线实现任意组件间通信的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,下面这篇文章主要给大家介绍了关于vuex页面刷新数据丢失问题的四种解决方式,需要的朋友可以参考下2022-02-02
vue实现图片下载点击按钮弹出本地窗口选择自定义保存路径功能
vue前端实现前端下载,并实现点击按钮弹出本地窗口,选择自定义保存路径,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
最近在学习Vue的时候,正好学到了引入echarts图表做数据统计的内容,所以下面这篇文章主要给大家介绍了关于Vue使用Echarts图表多次初始化报错问题的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
vue-cli3在main.js中console.log()会报错的解决
这篇文章主要介绍了vue-cli3在main.js中console.log()会报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue.js在设计上采用MVVM模式，当View视图层发生变化时，会自动更新到ViewModel.接下来通过本文给大家分享Vue.js实现列表清单的操作方法，需要的朋友参考下吧2017-11-11
这篇文章主要介绍了js数组的 entries() 获取迭代方法，entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。下面来详细介绍该neural,需要的朋友可以参考一下2021-10-10
最新评论