异常描述：

支付宝中内嵌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项目强制清除页面缓存的更多相关文章

  1. asp.net清除页面缓存防止同时登录

    //清除页面缓存,防止页面回退重复提交数据 在页面里做以下设置就可以使页面的缓存失效,每次都需要获取新页面. Response.Cache.SetCacheability(System.Web.Htt ...

  2. ASP.NET几种清除页面缓存的方法

    在asp.net中使用模式dialog时,你会发现每次打开的页面都是相同的内容,页面内容并没有刷新,这是缓存的原因造成的, 解决方法如下: 第一种是ASP.NET清除页面缓存 Response.Buf ...

  3. HTML页面每次打开的时候都清除页面缓存

    解决办法为: (1) 用HTML标签设置HTTP头信息 <HEAD> <META    HTTP-EQUIV="Pragma" CONTENT="no- ...

  4. vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  5. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  6. IDEA强制清除Maven缓存

    目录 重新导入依赖的常见方式 存在的问题 彻底清除IDEA缓存的方式 重新导入依赖的常见方式 下面图中的刷新按钮,在我的机器上,并不能每次都正确导入pom.xml中写的依赖项,而是导入之前pom.xm ...

  7. vue项目，子页面刷新404问题

    翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...

  8. (转)vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

  9. vue-cli搭建vue项目（单页面应用）

    1.全局安装vue-cli 2.创建项目: vue init webpack test test是项目名称,会在当前工作目录下新建一个test文件夹 接下来会手动选择一些配置 除了Setup unit ...

随机推荐

  1. JSON的一些小结

    一.js中 1.json字符串转json对象 var json = $.parseJSON(" {'1':'hello'},{'2':'word'} "); for(var i i ...

  2. 从npm 角度理解 mvn 的 pom.xml

    从npm 角度理解 mvn 的 pom.xml pom -- project object model. 用于描述项目的配置: 基础说明 依赖 如何构建运行 类似 node.js 的 package. ...

  3. 【HDU5187】contest

    真的没有什么会写的东西了QAQ 原题: As one of the most powerful brushes, zhx is required to give his juniors n probl ...

  4. maven+dubbo+zookeeper 基础实例

    1.maven  引入依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:/ ...

  5. jlet

    项目地址 :  https://github.com/kelin-xycs/jlet jlet jlet 一个 javascript 的 小 Lib 本来想写一个 javascript 的 小 Lib ...

  6. Centos6.5安装mariadb的坑坑

    最近在看Ansible,<Ansible权威指南>,然后有个地方是搭建Web应用框架,有个服务器是安装Mariadb,找到官方文档,一直弄,总是报错,换个思路,下载rpm到本地,安装,然后 ...

  7. Guava 2:Basic utilities基本工具

    一.引子 Guava的经典很大一部分原因来源于对于基础工具类的封装,使用这些类能够让我们的代码更加优雅且完善,这些类大部分都在com.google.common.base包下. 注:JDK有很多借鉴g ...

  8. AIUI开放平台：多轮对话返回前几轮语槽数据

    编写云函数: AIUI.create("v2", function(aiui, err){ // 获取 response response = aiui.getResponse() ...

  9. react的注意点

    1.import Form from '../pages/form/view' 与 import Form from '../pages/form/container'的区别: 前者只是引入view. ...

  10. redis集群设置密码

    redis集群密码设置 1.密码设置(推荐)方式一:修改所有Redis集群中的redis.conf文件加入:  masterauth passwd123 requirepass passwd123 说 ...