Nginx 中怎么配置静态资源缓存配合前端构建工具版本管理-Nginx-PHP中文网

静态资源缓存配合前端构建工具版本管理的核心目标是让浏览器在资源更新时自动拉取新版本而非卡在旧缓存中；需前端生成带内容哈希的文件名（如index.8a3f2b1e.js）并配置Nginx对哈希资源设expires 1y和immutable，同时HTML文件禁用长期缓存，favicon与manifest等小文件也须统一处理。

nginx 中怎么配置静态资源缓存配合前端构建工具版本管理

静态资源缓存配合前端构建工具的版本管理，核心目标就一个：让浏览器在资源更新时自动拉新，不卡在旧缓存里。这需要前后端两头配合——前端构建生成带哈希的文件名，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"，明确告知该资源不会变，避免协商缓存干扰

典型配置段：

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

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，就归入上面的通用静态资源规则里统一处理

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！