vue项目强制清除页面缓存的例子


Posted in Javascript onNovember 06, 2019

异常描述:

支付宝中内嵌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项目强制清除页面缓存的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的16进制字符(改进)
Nov 21 Javascript
js读取cookie方法总结
Oct 31 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 #Javascript
JS实现随机抽取三人
Nov 06 #Javascript
Node对CommonJS的模块规范
Nov 06 #Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 #Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 #Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 #Javascript
js+html实现点名系统功能
Nov 05 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP 动态随机生成验证码类代码
2010/04/09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
智能钱包:Ekster
2019/11/21 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
淘宝好评语句大全
2014/12/31 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python