CSS在本地环境正常加载但服务器端显示旧版本无法生效如何解决

可行解决方案 #

• 首先尝试客户端强制刷新跳过本地缓存：Windows系统按Ctrl + F5，Mac系统按Cmd + Shift + R，强制浏览器从服务器拉取最新的CSS资源，不要用本地缓存的旧文件。
• 给CSS引用添加版本号查询参数规避缓存，修改你的link标签为以下格式，每次更新CSS后修改v=后面的数值/字符串即可：

  <link rel="stylesheet" type="text/css" href="/css/style.css?v=2024052001"/>
  

  浏览器会把带不同查询参数的资源当作不同的新资源，不会复用旧缓存。
• 直接在浏览器地址栏输入完整的CSS文件地址（格式为你的站点域名/css/style.css），查看返回的内容是否是你修改后的最新版本：
  • 如果直接访问拿到的还是旧内容，说明问题出在服务端：要么是你修改后的CSS文件没有上传到正确的服务器路径，要么是服务器/CDN节点缓存了旧的CSS文件，需要到对应的服务后台手动刷新静态资源缓存。
  • 如果直接访问拿到的是最新内容，说明是页面端的缓存问题，按前两个方案处理即可。
• 如果你用了Vue、React等框架或者Webpack、Vite等构建工具，确认本地修改后已经执行了打包命令，上传到服务器的是最新打包生成的CSS文件，不是旧的构建产物。
• 检查服务器的静态资源缓存配置，比如Nginx、Apache默认可能会给CSS等静态资源设置较长的Cache-Control缓存时间，可以调整配置缩短缓存时长，或者添加ETag、Last-Modified等校验规则，避免文件更新后长时间返回旧资源。

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