能实现动态追加版本标识：需禁用压缩、扩展sub_filter_types支持JS/CSS/SVG、设sub_filter_once off全局替换，并用变量（如$msec或$app_version）在src="/或href="/后精准注入?v=参数，避免误改API路径。
用 Nginx sub_filter 在网关层为前端资源（如 JS、CSS、图片）动态追加版本标识（如 ?v=20260506），能有效规避浏览器缓存导致的旧资源加载问题，且无需修改前端代码或重新构建。核心在于精准定位资源路径并注入带时间戳或变量的查询参数。
明确替换目标与位置
前端资源通常以相对路径或绝对路径出现在 HTML 中，例如：
<script src="/js/app.js"></script>
需统一替换所有这类路径，在末尾插入 ?v=xxx。推荐使用带边界的字符串提高准确性，比如匹配 src="/ 和 href="/ 后紧跟路径的部分，但注意 sub_filter 不支持正则捕获，所以更稳妥的做法是分两步：先替换常见前缀，再确保不破坏已有参数。
示例写法（在 location 块中）：
-
sub_filter 'src="/' 'src="/?v=$time_iso8601';→ 会把src="/js/app.js"变成src="/?v=2026-05-06T18:27:00+00:00js/app.js"（错误！） - 正确做法是匹配完整路径片段，如：
sub_filter 'src="/js/' 'src="/js/?v=20260506';，但这样缺乏动态性 - 更通用方式：用变量构造唯一但稳定的标识，例如
sub_filter 'src="/' 'src="/?v=$msec';（毫秒级时间戳），配合sub_filter_once off全局生效
配置关键项必须到位
以下指令缺一不可，否则替换不会触发：
-
禁用压缩：添加
proxy_set_header Accept-Encoding "";，并在 location 中设gzip off;或确保后端不返回 gzip 内容；sub_filter对压缩响应无效 -
扩展 MIME 类型：默认只处理
text/html，需显式加入资源类型：sub_filter_types text/html application/javascript text/css image/svg+xml;（若 HTML 中内联了 JS/CSS 或含 SVG） -
启用全局替换：
sub_filter_once off;，否则每个资源路径只改第一个 -
关闭 ETag 干扰：
proxy_hide_header ETag;+add_header Cache-Control "no-cache";，避免因替换后内容变更但缓存头未更新导致脏读
用变量实现真正动态版本号
硬编码版本值无法应对每次发布，应利用 Nginx 内置变量或自定义变量生成实时标识：
-
$time_iso8601或$date_gmt：适合调试，但粒度太粗（秒级），可能造成 CDN 多次回源 -
$msec（毫秒）：高频更新，防缓存效果强，但对 CDN 友好性差 - 结合部署标识：通过
map从环境变量或文件读取版本，例如：map $host $app_version { default "v2.4.1"; }
再用sub_filter 'src="/' "src="/?v=$app_version"; - 注意：变量只能用于替换值（右侧），不能用于匹配模式（左侧）；左侧必须是静态字符串，如
'src="/'或'href="/css/'
验证与避坑要点
替换后务必人工检查响应内容是否符合预期：
- 打开浏览器开发者工具 → Network → 刷新页面 → 点击
index.html→ 查看 Response 标签页，确认所有资源路径已带?v=xxx - 检查是否误替换：如把
src="/api/xxx"也加了?v=，应限定匹配范围，例如改用'src="/js/'、'src="/css/'、'src="/img/'多条规则分别处理 - 若页面含内联脚本中拼接的资源路径（如
document.write('<script src="/js/a.js">')</script>），需额外在sub_filter_types中加入application/javascript并确保该 JS 响应未被压缩 - 替换后若页面报 404，请确认后端服务是否能正确处理带查询参数的静态路径（多数 Web Server 默认支持）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
