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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
JavaScript实现随机点名器
Mar 25 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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
初识laravel5
2015/03/02 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
详解Anaconda 的安装教程
2020/09/23 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
技术总监的工作职责
2013/11/13 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
党员学习十八大感想
2014/01/17 职场文书
西式婚礼主持词
2014/03/13 职场文书