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 和最新内容。