如何加载JS脚本不使用缓存中的过期文件？本地测试缓存更新不生效如何处理

嗨，这个问题我太懂了！本地开发时浏览器的缓存机制简直是“隐形绊脚石”，给你几个实用的解决办法，按需选择就行：

• 手动强制刷新（临时应急首选）
  直接用快捷键强制浏览器忽略缓存重新加载：Windows/Linux按 Ctrl + Shift + R，Mac按 Cmd + Shift + R。另外，打开开发者工具（按F12），切换到「网络」标签，勾选「禁用缓存」选项——只要开发者工具保持打开状态，浏览器就不会缓存任何静态资源，持续开发时用这个超省心。

• 给JS文件加版本标识（长期推荐方案）
  修改你的script标签，给URL加个版本参数或者哈希值，比如把：

  <script src="js/file.js" type="text/javascript" charset="utf-8"></script>
  

  改成：

  <script src="js/file.js?v=1.0.1" type="text/javascript" charset="utf-8"></script>
  

  每次更新JS内容后，把v=后面的数字改一下（比如从1.0.1改成1.0.2），浏览器会认为这是一个全新的资源，就会重新下载最新的文件。如果你的项目用了Webpack、Vite这类构建工具，它们还能自动给打包后的文件加上唯一哈希后缀（比如file.abc123.js），完全不用手动修改，适配大规模项目更高效。

• 配置本地服务器的缓存策略
  如果你用的是Apache、Nginx或者Node.js搭建的本地服务器，可以在配置里设置静态资源的缓存过期时间为0，让浏览器每次都请求最新文件。举个Nginx的配置例子：

  location ~* \.(js|css)$ {
      expires -1; # 立即过期，不缓存
  }
  

  要是用的是VS Code的Live Server这类插件，去插件设置里找找“禁用缓存”的选项，开启后也能自动跳过缓存。

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