静态资源缓存配合前端构建工具版本管理的核心目标是让浏览器在资源更新时自动拉取新版本而非卡在旧缓存中；需前端生成带内容哈希的文件名（如index.8a3f2b1e.js）并配置Nginx对哈希资源设expires 1y和immutable，同时HTML文件禁用长期缓存，favicon与manifest等小文件也须统一处理。
静态资源缓存配合前端构建工具的版本管理，核心目标就一个：让浏览器在资源更新时自动拉新，不卡在旧缓存里。这需要前后端两头配合——前端构建生成带哈希的文件名，Nginx 配置对应缓存策略，两者缺一不可。
前端构建必须输出带内容哈希的文件名
这是整个方案的起点。Vue CLI、Vite、Webpack 默认都支持，关键是要确认启用且生效：
- Vue CLI 项目检查
vue.config.js中是否配置了filenameHashing: true（默认开启） - Vite 项目查看
vite.config.ts的build.rollupOptions.output.entryFileNames和assetFileNames，确保含[hash]或[contenthash] - 构建后进
dist目录看 JS/CSS 文件名，例如index.8a3f2b1e.js、main.e9d4c752.css—— 有这一串随机字符才算成功
Nginx 针对哈希文件配置长期缓存
一旦文件名自带哈希，内容变了 URL 就变，浏览器自然当它是新资源。这时就可以放心设超长缓存：
- 匹配所有带哈希的静态资源后缀（JS/CSS/图片/字体等）
- 用
expires 1y告诉浏览器缓存一年 - 加
add_header Cache-Control "public, immutable"，明确告知该资源不会变，避免协商缓存干扰
典型配置段：
立即学习“前端免费学习笔记（深入）”；
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}HTML 文件必须禁用长期缓存
HTML 是入口文件，不能缓存太久，否则用户即使刷新也看不到新版页面。它不带哈希，靠的是每次构建都生成全新内容：
- 把
index.html单独拎出来，设置极短缓存或不缓存 - 推荐用
add_header Last-Modified ""清空时间戳，再配合expires -1或Cache-Control no-cache
示例：
location = /index.html {
add_header Last-Modified "";
expires -1;
add_header Cache-Control "no-cache";
}额外提醒：别漏掉 favicon 和 manifest
这些小文件也常被忽略，但它们同样影响首屏体验和 PWA 行为：
- 如果
favicon.ico或manifest.json没加哈希，就得单独配短缓存 - 更稳妥的做法是让构建工具也给它们加 hash（Vite 支持
build.rollupOptions.output.assetFileNames控制） - 若已加 hash，就归入上面的通用静态资源规则里统一处理
