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 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
原生JS实现留言板功能
Feb 08 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
vue cli4.0项目引入typescript的方法
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
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php数字游戏 计算24算法
2012/06/10 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
学校食堂食品安全责任书
2014/07/28 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
vue动态绑定style样式
2022/04/20 Vue.js
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python