Vue/Laravel：使用查询参数来避免缓存答案

【问题标题】：Vue/Laravel: Using query params to avoid cachingVue/Laravel：使用查询参数来避免缓存
【发布时间】：2019-05-08 23:00:00
【问题描述】：

我在缓存捆绑的 Vue js 时遇到问题，因此我将开始版本控制。但是，我很困惑哪种方法是正确的。我知道我应该通过添加查询字符串来引用 Blade 文件中的 JS 文件，以使服务器认为它是一个新文件，但是我必须对实际的 app.js 文件做任何事情吗？

<script type="text/javascript" src="{{ cdn('/js/app.js') }}"></script>

编辑：

Laravel Mix 使用 mix() 的内置版本控制不起作用，因为我正在通过自定义 CDN 帮助程序访问 JS 文件： <script type="text/javascript" src="/js/app.js?v=123"></script>

function cdn($file)
{
    return env('CDN_URI', '').'/'.ltrim($file, '/');
}

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

如果您将 Laravel 与 Vue.js 一起使用，我猜您正在使用 Laravel Mix，如果不是，您可能应该这样做。 Laravel Mix 已经通过查询字符串哈希提供了cache busting。因此，如果您要使用 Laravel Mix，就像在您的 webpack.mix.js 文件中一样简单：

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

然后在你的 Blade 文件中使用 mix 辅助函数：

<script src="{{ mix('/js/app.js') }}"></script>

这将输出如下：

<script src="/js/app.js?id=a7af6e15c9595bb9d346"></script>

只要您的 JS 文件发生更改，哈希就会自动更改。

所以是的，您添加随版本更改的查询字符串值的方法很好。但除非你有强烈的反对理由，否则我建议使用 Laravel Mix，因为版本控制只是你从中获得的众多好处之一。

编辑

要解决您的特定问题，您可以将帮助函数修改为如下所示：

function cdn($file, $useMix = false)
{
    return env('CDN_URI') . ($useMix ? mix($file) : $file);
}

这将完全相同，只是它将您的自定义 CDN 预先添加到混合助手输出的相对路径中。如果您想同时使用这两种情况：

// With Mix
cdn('js/app.js');

// Without Mix
cdn('js/app.js', false);

我已经稍微简化了你的功能，因为：

env('CDN_URI') 与env('CDN_URI', '') 效果相同
和'/' . ltrim($file, '/') 与使用mix() 时只有$file 完全相同。

【讨论】：

感谢博格丹！不幸的是，我尝试了这个，但它对我不起作用，因为我正在通过自定义 CDN 帮助程序访问 JS 文件，如下所示：<script src="{{ cdn('/js/app.js') }}"></script>
您的cdn() 辅助函数是什么样的？也许有一种方法可以解决这个限制。请更新您的问题以包含 cdn() 函数的相关代码。
非常感谢博德根！整个项目都在使用 cdn 助手。修改后的 cdn 助手是否会对未与 mix 助手一起使用的文件产生任何不利影响？
只要使用 cdn（以及扩展的 mix 函数）引用的文件是使用 Laravel Mix 编译的，这将起作用。这是因为当 Laravel Mix 编译任何文件时，它会将它们添加到 public/mix-manifest.json 文件中，该文件用于生成版本哈希（您可以自己打开该文件以查看它的外观）。 简而言之，只要你使用 Laravel Mix 来管理你的项目的 JS 资源，你在任何地方使用 cdn() 辅助函数应该绝对没有问题。
你可以这样做，但对你来说更方便。我只是提供一个快速的解决方案。

【解决方案2】：

您应该研究混合助手； Laravel 内置了你需要的一切，以确保你的刀片模板在你使用 mix 时总是包含你的版本链接......

在这里查看：https://laravel.com/docs/5.8/mix#versioning-and-cache-busting

【讨论】：