加?v=能强制更新CSS是因为浏览器仅依据完整URL判断缓存，修改查询参数后URL变化即触发新请求；该参数不被服务端解析，仅用于绕过缓存，正确写法为。
为什么加 ?v= 能让 CSS 更新生效
浏览器把 style.css 当作一个固定地址，只要 URL 没变，就可能直接从磁盘读缓存，连请求都不发。加 ?v=2.1.0 或 ?t=1715823400 后，URL 变成 style.css?v=2.1.0，浏览器判定这是新资源，强制发起新请求——旧缓存还在，只是不被加载。
注意：?v= 不是清除缓存，而是绕过它；服务端根本不需要识别这个参数，静态服务器（如 Nginx、Vercel）默认忽略查询参数，只按路径找文件。
- 正确写法只有这一种：
<link rel="stylesheet" href="/static/style.css?v=2.1.0"> - 错误做法：改服务器上文件名为
style.css?v=2.1.0→ 文件系统不认，404 - 别用
Math.random()生成值 → 每次都不同，彻底废掉缓存复用
Webpack/Vite 里怎么自动生成可靠版本标识
手写 v=1.2.0 极其危险：CSS 内容变了但版本号没改，缓存照旧；版本号升了但 CSS 没动，用户白下一次。
构建工具的 contenthash 才是正解：文件内容一变，哈希就变，URL 天然更新。
- Webpack：配
MiniCssExtractPlugin.filename = '[name].[contenthash:8].css'，再用html-webpack-plugin注入 HTML - Vite：默认开启
build.rollupOptions.output.entryFileNames哈希，CSS 产出如index.b8f2e1a2.css - 关键点：HTML 里不能手写
href="style.css"，否则构建生成的哈希文件永远不被引用
CDN 或反向代理让 ?v= 失效？检查这三点
本地测试 OK，上线后样式还是旧的？大概率是 CDN 或 Nginx 在“中间截胡”，把带不同 v 的请求当同一个资源缓存了。
- Cloudflare：确认「Ignore query string」是否关闭（默认已支持，但开了「Cache Everything」规则时可能覆盖）
- Nginx：检查
proxy_cache_key是否包含$args，例如：proxy_cache_key "$scheme$request_method$host$request_uri$args"; - 验证方式：curl -I https://yoursite.com/style.css?v=1 和
?v=2，看响应头中X-Cache: HIT是否一致
比 ?v= 更稳的方案：HTTP 缓存头 + 文件名哈希组合
?v= 是前端妥协方案，每次都是完整下载，对大 CSS 包不友好；真正长效解法是前后端配合。
- 生产环境：CSS 文件用 contenthash 命名，服务端对其返回
Cache-Control: public, max-age=31536000 - HTML 文件本身必须禁用缓存：Nginx 配
location = /index.html { add_header Cache-Control "no-cache"; } - 开发阶段可临时用
Cache-Control: no-cache, must-revalidate，但别长期依赖——它靠协商缓存（304），前提是服务端正确返回ETag或Last-Modified
最容易被忽略的是：HTML 缓存没控制好，哪怕 CSS 更新了，用户拿到的仍是旧 HTML，里面还写着老 href。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
