vue 项目如何避免刷新不更新缓存

1. `index.html` 添加头部内容禁止缓存

在你的Vue项目生成的index.html文件中添加以下meta标签，以确保该文件不会被浏览器缓存。这对于保证每次发布新版本时用户能立即获取最新资源非常重要。

<head>
    <!-- 禁止缓存 index.html -->
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
</head>

注意：尽管这些meta标签有助于兼容旧版浏览器，但现代浏览器主要依赖HTTP响应头来决定缓存策略。因此，结合服务器端配置会更有效。

2. JavaScript等资源文件的哈希命名

Vue CLI默认情况下会对构建输出的JavaScript、CSS等资源文件名添加内容哈希值（如app.abc123.js）。这样做的好处是，每当文件内容发生变化时，文件名也会随之变化，从而强制浏览器下载最新的资源文件而不是使用缓存中的旧版本。

如果你发现某些资源没有自动加上哈希值，请检查你的vue.config.js配置文件，确保正确设置了filenameHashing选项：

module.exports = {
  // 其他配置项...
  filenameHashing: true,
};

3. 静态资源的协商缓存策略

对于其他静态资源（如图片、字体等），可以采用“协商缓存”策略，通过设置适当的HTTP头部来优化性能并减少不必要的请求。

Nginx 配置示例

server {
    listen 80;
    server_name yourdomain.com;

    # index.html 不缓存
    location = /index.html {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }

    # 对于其他静态资源，启用协商缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|eot|otf|ttf|woff|woff2)$ {
        expires 1M;
        access_log off;
        add_header Cache-Control "public";
        add_header Pragma public;
        add_header Vary Accept-Encoding;
        try_files $uri $uri/ =404;
    }
}

Apache (.htaccess) 配置示例

<IfModule mod_expires.c>
    ExpiresActive On
    # 设置图片、CSS、JS等资源的有效期为1个月
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    
    # index.html 不缓存
    <FilesMatch "\.html$">
        Header set Cache-Control "no-cache, no-store, must-revalidate"
    </FilesMatch>
</IfModule>