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

【问题标题】：How to force browser to clear cache when i upload a new version of code上传新版本代码时如何强制浏览器清除缓存
【发布时间】：2020-04-01 03:58:55
【问题描述】：

我目前正在运行一个带有 VueJs Web 应用程序的 laravel。我对css进行了一些更改，并在几天前发布了新版本。由于浏览器缓存，大多数 css 都搞砸了。

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

谢谢！

【问题讨论】：

【解决方案1】：

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

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

并且因为在开发模式下不需要版本，您可以使用以下代码来告诉 mix 到 puth 文件版本只有当您运行 npm run prod

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

【讨论】：

【解决方案2】：

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

立即修复：

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

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

【讨论】：

【解决方案3】：

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

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

你也可以对 js 文件做同样的事情。

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

【讨论】：