VUE前端应用部署页面访问404问题
VUE前端应用部署页面访问404问题;页面缓存问题
·
场景
由于vue项目上线后,用户页面异常,打开 F12 显示很多请求出现404,原因大概率在于当前页面使用了浏览器的缓存,请求旧的资源失败。
浏览器缓存机制解析
nginx服务器缓存机制解析
Nginx系列(二十一):HTTP Cache机制_yang_oh的博客-CSDN博客
解决办法
1、在vue项目中解决
在入口文件index.html添加:
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
2、如果是部署在nginx上
在nginx的配置文件 nginx.config添加:
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
如果是用nginx做反向代理的,这么加
location = /xx(xx为你的代理的项目名) {
add_header Cache-Control "no-cache, no-store";
}
如果nginx上有 proxy_cache 的配置,也考虑删掉,这是nginx的服务器缓存
3、前端新增版本号控制(大应用要考虑)
- 前端轮询一个版本号的服务接口
- 每次发版更新版本号
- 每次请求判断当前版本号与配置的版本是否一致,不一致则强制刷新
4、ctrl+f5强制刷新浏览器,这是对于用电脑浏览器的用户来说
强制刷新 (Ctrl + F5):浏览器不使用缓存,因此发送的请求头部均带有Cache-control: no-cache(为了兼容,还带了Pragma: no-cache),服务器直接返回 200 和最新内容。
更多推荐
已为社区贡献3条内容
所有评论(0)