Question

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

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

编辑：

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

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

Answer 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);

我之所以精简了您的功能，是因为：

Answer 2

您应该研究混合助手； Laravel提供了您所需的一切，以确保您的刀片模板在使用mix ...时始终包含版本链接。