当我上传新版本的代码时，如何强制浏览器清除缓存

Question

我目前正在使用VueJs Web应用程序运行laravel。我对CSS进行了一些更改，并在几天前发布了新版本。大多数CSS由于浏览器缓存而混乱。

不是要求用户强制重新加载高速缓存（这是不可行的），还有另一种方法来强制浏览器检索文件的新版本以反映更改吗？

谢谢！

Answer 1

最好的方法是使用 mix 创建已编译资产的版本。

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

并且因为在开发模式下不需要版本，所以只有在运行 npm run prod

时，您可以使用以下代码告诉 mix 到 puth 文件版本

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

Answer 2

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

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

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

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

Answer 3

实现这一目标的各种策略。

立即修复：

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

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