vue项目强制清除页面缓存的例子
更新时间：2019年11月06日 08:56:01 作者：逍遥云天
今天小编就为大家分享一篇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;
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项目强制清除页面缓存的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了vue3路由新玩法useRoute和useRouter，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue中的slot与slot-scope的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
本篇文章主要介绍了vue如何使用 Slot 分发内容实例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
随着前端技术的发展,CSS 变量（也称为 CSS 定制属性）成为了现代 Web 开发中不可或缺的一部分,在 Vue.js 应用程序中,使用 CSS 变量不仅可以增强样式的灵活性,还能提高开发效率,本文将详细介绍如何在 Vue 项目中引入并使用 CSS 变量,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue实现给当前元素添加样式,其他元素无样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了详解如何创建并发布一个vue组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
下面小编就为大家分享一篇快速处理vue渲染前的显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文主要介绍了Vue的基本应用。具有一定的参考价值，需要的朋友一起来看下吧2016-12-12
这篇文章主要介绍了vue3.0如何使用computed来获取vuex里数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论