React/Vite生产构建后浏览器缓存清除方案求助

算力阿峰

2026-6-30

React/Vite生产构建后浏览器缓存问题的解决办法

问题核心

浏览器请求旧哈希的index.6b47bc15.js，本质是缓存的旧index.html仍在引用它，你添加的meta缓存标签因优先级低于服务器响应头，未实际生效。

解决方案

服务器端配置缓存规则（根本解决）
这是最可靠的方案，需区分index.html和带哈希的静态资源：
- 对index.html设置强制验证缓存：配置服务器返回Cache-Control: no-cache, must-revalidate，让浏览器每次请求都拉取最新的index.html，从而获取新的资源引用。
- 对带哈希的JS/CSS/图片等静态资源设置长缓存：比如Cache-Control: public, max-age=31536000, immutable，这类文件哈希随内容变化，不会出现缓存过期问题。
  以Nginx为例，配置示例：
```
location / {
  try_files $uri $uri/ /index.html;
  add_header Cache-Control "no-cache, must-revalidate";
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
}
```
其他服务器（Apache、Netlify等）对应调整缓存配置即可。

优化Vite构建配置（辅助保障）
Vite默认已生成带哈希的资源文件名，可在vite.config.js里明确配置输出规则，确保哈希稳定：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: '[name].[hash].[ext]',
        chunkFileNames: '[name].[hash].js',
        entryFileNames: '[name].[hash].js'
      }
    }
  }
});