这个问题我开发时碰到过好多次！大概率是缓存在搞鬼，不管是浏览器端还是开发服务器的缓存，下面给你几个靠谱的解决步骤，按顺序试基本能搞定：

1. 先搞定浏览器缓存 #

• 强制硬刷新：这是最快的方法，Windows/Linux按 Ctrl + Shift + R，Mac按 Cmd + Shift + R，这个操作会跳过本地缓存，直接从服务器拉最新资源。
• 临时禁用浏览器缓存：打开开发者工具（F12），切换到「Network」面板，勾选顶部的「Disable cache」选项（注意要保持开发者工具打开，这个设置才会生效），之后刷新页面就不会用缓存了。
• 手动清除浏览器缓存：如果上面的方法没用，就去浏览器设置里找「清除浏览数据」，只勾选「缓存的图片和文件」，时间范围选「过去一小时」就行，不用全清其他数据。

2. 检查开发服务器的缓存 #

• 重启开发服务器：很多时候是开发服务器缓存了旧的构建产物，直接关掉终端里的服务，重新运行 npm run dev（或者你用的yarn dev、pnpm dev），重启后一般会加载新内容。
• 清理构建工具的缓存文件夹：有些构建工具会生成缓存目录，比如：
  • Webpack/Vue CLI：删掉项目根目录下的 node_modules/.cache 文件夹
  • Vite：删掉 .vite 文件夹
  • Create React App：删掉 build 文件夹（开发环境其实不用，但如果之前跑过生产构建可能有影响）
    删完再重启服务器试试。
• 确认热更新配置：如果你用的是React、Vue这类框架，确保开发模式下开启了热更新（HMR）。比如Webpack要配置 HotModuleReplacementPlugin，Vite默认是开启的，如果没生效可以检查下配置文件有没有意外关掉这个功能。

3. 特殊情况：Service Worker 缓存 #

如果你的应用用到了PWA的Service Worker，它会在本地缓存资源，哪怕你改了内容也可能加载旧的：

• 注销Service Worker：打开开发者工具的「Application」面板，找到左侧的「Service Workers」，点击列表里的「Unregister」按钮，然后刷新页面。
• 开发环境禁用Service Worker：在代码里暂时注释掉注册Service Worker的逻辑，比如React项目里的 serviceWorkerRegistration.register() 这行代码，开发阶段没必要开这个。

一般按这个顺序试，基本能解决localhost加载旧内容的问题。

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