如何在上传新代码版本时强制浏览器清除缓存

Question

我目前正在运行一款采用Laravel和VueJs的Web应用程序。我对CSS进行了一些更改，并在几天前发布了新版本。由于浏览器缓存，大部分CSS都混乱了。

是否有其他方法可以强制浏览器检索文件的新版本，以便反映出更改，而不是要求用户强制重新加载缓存，这是不可行的？

谢谢！

- Shin

---

Laravel Mix 不是处理这个的吗？https://laravel.com/docs/6.x/mix#versioning-and-cache-busting - lagbox

Answer 1

是的，你可以通过在文件末尾添加版本号来防止浏览器缓存你更新后的脚本。

<link 
    rel="stylesheet" 
    href="{{ asset('css/app.css?v='.filemtime(public_path('css/app.css'))) }}" 
/>

同样的操作，您也可以对JS文件进行。

filemtime() 方法返回文件修改时间，仅在您修改CSS文件时才会更改。

- jogesh_pi

Answer 2

有多种策略可以实现此目标。

立即修复：

将CSS/JS文件重命名为虚假后缀，并更新HTML以指向它们。浏览器会被欺骗认为它们是不同的文件并进行刷新。 框架可能可以在构建时自动化此过程。

另一种处理此问题的常见方法是调整标题，始终检查缓存是否过期 - 可以在.htaccess中手动配置 - 检查缓存控制和过期标题。

- Nicolas B

Answer 3

最好的方法是使用mix来创建编译后资源的版本。

mix.js('resources/js/app.js', 'public/js')
.version();

因为在开发模式下不需要版本号，所以您可以使用以下代码告诉Mix仅在运行npm run prod时才生成文件版本号：

mix.js('resources/js/app.js', 'public/js');
if (mix.inProduction()) {
    mix.version();
}

更多信息请查看Laravel文档 https://laravel.com/docs/8.x/mix#versioning-and-cache-busting

- Divin17

---

欢迎来到SO，非常好的答案。这绝对是Laravel的方式。 - ceejayoz