加版本号后缀能绕过CSS缓存，因浏览器将带不同查询参数的URL视为新资源而强制重新下载；但旧缓存仍存在，仅不被加载。
为什么加版本号后缀能绕过CSS缓存
浏览器对 style.css 这类静态资源有强缓存策略，一旦本地有且未过期，就直接读磁盘，根本不发请求。加 ?v=1.0.1 或 ?t=1715234890 后，URL 变成新地址，浏览器视为全新资源，强制重新下载。
但注意：这不是“清除旧缓存”，而是“让旧缓存失效”。旧文件还在用户本地，只是不会被加载——除非 URL 完全一致，否则不命中。
用构建工具自动注入时间戳或哈希值
手写 ?v=2.1.0 很危险：版本没改但 CSS 改了，缓存仍生效；版本号升级但 CSS 没变，反而浪费一次下载。真实项目必须自动化。
- Webpack 用户用
MiniCssExtractPlugin+contenthash，生成类似style.a1b2c3d4.css的文件名，再通过html-webpack-plugin注入 HTML —— 此时根本不用后缀，靠文件名变化触发更新 - Vite 用户默认开启
build.rollupOptions.output.entryFileNames哈希，CSS 会被打成index.b8f2e1a2.css，同样无需手动加参数 - 如果硬要用查询参数（比如后端模板直出），确保每次构建生成唯一值：
?t=（开发慎用，会彻底禁用缓存）或?v=
后缀加在哪儿？link 标签的 href 里，不是文件路径本身
常见错误是去改服务器上的 style.css 文件名为 style.css?v=1.2 —— 文件系统不认这个，404。后缀只存在于 URL 层，由浏览器解析，服务端收到的是带查询参数的完整路径，但静态服务器（如 Nginx、Vercel）默认忽略查询参数，只按文件路径找资源。
立即学习“前端免费学习笔记（深入）”；
正确写法只有这一种：
<link rel="stylesheet" href="/static/style.css?v=2.3.0">
只要服务端能正常返回 /static/style.css 文件内容，?v=... 就纯粹起缓存破除作用。Nginx 不需要额外配置，Vite/webpack dev server 也不需要。
HTTP 头比后缀更可靠，但需后端配合
Cache-Control: no-cache 或 max-age=0 能让浏览器每次验证资源是否更新（发带 If-None-Match 的条件请求），比瞎加后缀更省流量。但前提是后端正确返回 ETag 或 Last-Modified，且你有权限改响应头。
前端单方面加 ?v= 是妥协方案：它不依赖服务端逻辑，但会完全跳过协商缓存，每次都是 200 OK 下载完整文件。小 CSS 影响不大，大文件（如主题包）就得权衡。
另外注意：某些 CDN 会主动剥离查询参数做缓存优化（比如 Cloudflare 的 “Ignore query string” 默认开），此时 ?v= 失效——得关掉该选项，或改用哈希文件名。
