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中的对象 推荐
Jan 09 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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
长波有什么东西
2021/03/01 无线电
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python如何在终端里面显示一张图片
2016/08/17 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
个人收入证明范本
2014/01/12 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
感恩寄语大全
2014/04/11 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2014年工程部工作总结
2014/11/25 职场文书
教师工作决心书
2015/02/04 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript