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;
13 uwsgi_pass example-be;
14 }
# 前端静态文件
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项目强制清除页面缓存的更多相关文章
- asp.net清除页面缓存防止同时登录
//清除页面缓存,防止页面回退重复提交数据 在页面里做以下设置就可以使页面的缓存失效,每次都需要获取新页面. Response.Cache.SetCacheability(System.Web.Htt ...
- ASP.NET几种清除页面缓存的方法
在asp.net中使用模式dialog时,你会发现每次打开的页面都是相同的内容,页面内容并没有刷新,这是缓存的原因造成的, 解决方法如下: 第一种是ASP.NET清除页面缓存 Response.Buf ...
- HTML页面每次打开的时候都清除页面缓存
解决办法为: (1) 用HTML标签设置HTTP头信息 <HEAD> <META HTTP-EQUIV="Pragma" CONTENT="no- ...
- vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- 前端Vue项目——首页/课程页面开发及Axios请求
一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...
- IDEA强制清除Maven缓存
目录 重新导入依赖的常见方式 存在的问题 彻底清除IDEA缓存的方式 重新导入依赖的常见方式 下面图中的刷新按钮,在我的机器上,并不能每次都正确导入pom.xml中写的依赖项,而是导入之前pom.xm ...
- vue项目，子页面刷新404问题
翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...
- (转)vue项目刷新当前页面
场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...
- vue-cli搭建vue项目（单页面应用）
1.全局安装vue-cli 2.创建项目: vue init webpack test test是项目名称,会在当前工作目录下新建一个test文件夹 接下来会手动选择一些配置 除了Setup unit ...
随机推荐
- nodejs----初期学习笔记
//一 回调函数 //require---命令//Node 使用了大量的回调函数,Node 所有 API 都支持回调函数.//例如,我们可以一边读取文件,一边执行其他命令,在文件读取完成后,我们将文件 ...
- 关于if...else语句的小注意
if...else是一个使用非常频繁的条件语句,在条件满足时执行if下的代码,条件不满足时执行else下的代码.但在使用过程中会由于粗心犯一些错误. 比如我想要把性别的默认值设置为“男”,应该进行如下 ...
- Spark流处理调优步骤
总体运行状况: 这里的每个批处理任务间隔是10s一次,所以Total Delay是14s,那么对于下一个批处理任务来说就是延迟了14 - 10 = 4s . Total Delay - 每个批处 ...
- Excel技巧--单列变多行
当上图的单列转变成多行时,可以这么做: 1.在第一行输入A2.A3,向右拖拉第一行: 2.第二行按第一行最右顺序,写下A12,再向右拖拉出第二行: 3.选择这两行,再拖拉出一串连续顺序的多行来: 4. ...
- 【Python】断言功能Assertion
转自 https://www.cnblogs.com/cicaday/p/python-assert.html Python Assert 为何不尽如人意 Python中的断言用起来非常简单,你可以在 ...
- eclipse各版本及下载
附:Eclipse各个版本简介(http://zh.wikipedia.org/wiki/Eclipse) eclipse下载地址: https://www.eclipse.org/官网--右上角的I ...
- note 0 Python介绍及Python IDE环境安装 Spyder with Anaconda
高级语言分类 编译型语言(C/C++等) 解释型语言(BASIC.Python等) Python 诞生于1989年,创始人为吉多 范罗苏姆(Guido van Rossum) Python 语言特点 ...
- Linux下安装MySQL----来自简书(挺好的)
来自简书的: https://www.jianshu.com/p/f4a98a905011 注: 1. 下载方式: 可以使用命令下载: wget http://downloads.mysql.com/ ...
- html/css/js-如何利用jq来更改属性的值和获取属性的值
jquery的使用在web开发中是非常广泛的,虽然说比较容易,易学,但在开发过程中,也总是会碰到各种各样的小问题. 我曾经就遇到这种问题,jq如何获取属性值和更改属性值的. 众所周知,attr()可以 ...
- 虚拟机克隆之后，网卡名称从eth0变成eth1之后的解决办法
使用VMware安装了CentOS虚拟机,克隆之后使用service network restart指令来重新启动网络服务时,会看到有eth0网卡不存在的提示.出现这种现象的原因是,很多Linux d ...