vue index.html缓存解决

Vue 项目的 index.html 文件在部署到生产环境时，很容易受到浏览器缓存影响，导致用户无法看到最新的页面。为了解决这个问题，有几种方法：

1. 使用版本号：在构建项目时，设置打包后的文件名中包含版本号，比如 index.html?v=1.0，每次更新版本号即可避免缓存问题。

2. 使用 meta 标签：在 index.html 的 head 标签中添加 meta 标签，设置不缓存页面，代码如下：

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

 

 3.使用 nginx 反向代理：在 nginx 配置文件中设置不缓存页面，代码如下：

server {
        listen       80;
        server_name  test.exmaple.cn;
 
 
        location / {
                if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件
                {
                   add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
                }
                root /web/;
                index index.html;
                try_files $uri $uri/ /index.html =404;
        }
}

 

以上三种方法任选其一即可解决 Vue 项目 index.html 缓存问题。