VUE项目缓存问题解决方案

文件哈希策略

// Vue 2 (webpack 配置)
// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].[hash:8].js',
      chunkFilename: '[name].[hash:8].js'
    }
  }
}

// Vue 3 (vite 配置)
// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].[hash].js`,
        chunkFileNames: `[name].[hash].js`,
        assetFileNames: `[name].[hash].[ext]`
      }
    }
  }
})

​​HTML 禁用缓存​

<!-- public/index.html (两者通用) -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

​​​服务器配置（Nginx）

# 两者配置相同
location / {
  if ($request_filename ~* .*\.(html|htm)$) {
    add_header Cache-Control "no-cache";
  }
  
  location ~* \.(js|css)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
  }
}