Safari浏览器CSS文件修改后不更新，求无需每次改文件名的解决方案

1. 服务端配置缓存控制头（生产环境最优方案） #

这是从根源解决缓存逻辑的方案，不需要修改前端代码或资源文件名：

• Nginx配置示例，在配置文件的server块中添加：

location ~* \.(css|js|png|jpg)$ {
    add_header Cache-Control "no-cache, public, must-revalidate";
    etag on;
}

• Apache配置示例，在网站根目录的.htaccess文件中添加：

<IfModule mod_headers.c>
    <FilesMatch "\.(css|js)$">
        Header set Cache-Control "no-cache, public, must-revalidate"
    </FilesMatch>
</IfModule>

no-cache不是完全不缓存，而是要求浏览器每次使用资源前都校验服务端文件是否有更新，文件未修改就复用本地缓存，修改就加载新版本，兼顾加载速度和更新及时性

2. 资源URL加动态版本参数（低成本实现方案） #

不需要修改CSS文件本身的名称，只需要更新HTML中引用CSS的链接参数即可：

<!-- 每次修改CSS后更新?v后面的数字，Safari会识别为新的资源请求 -->
<link rel="stylesheet" href="/static/main.css?v=3">

如果使用Vite、Webpack等前端构建工具，可以开启静态资源哈希功能，打包时会自动根据文件内容生成哈希后缀（如main.7a2f9b.css），内容变化时哈希自动更新，无需手动维护。

3. 开发阶段临时调试方案 #

本地开发时可以直接关闭Safari的缓存逻辑：

• 首先开启Safari的开发菜单：偏好设置→高级→勾选「在菜单栏中显示开发菜单」
• 点击顶部开发菜单→勾选「停用缓存」
• 刷新页面时按下Command + Option + R组合键，强制忽略缓存加载资源

内容的提问来源于stack exchange，提问作者artchurro