在npm运行观察中需要硬刷新

Question

我正在使用Laravel与Vue JS. 大多数时候, 我使用 npm run watch 而不是其他命令。

当我修改VUE模板中的内容时，我必须按下 Ctrl+Shift+R 或硬刷新，才能真正在浏览器中看到修改后的内容。

我可以做的另一个选择是在开发者工具中勾选 "禁用缓存"（Network > Disable Cache）。

是要这样工作，还是有什么步骤可以不打硬刷新的运行。

Answer 1

浏览器默认会缓存资产。这是为了防止每次加载页面时需要重新下载资产（javascript、css等）。硬刷新将强制重新下载上述资产。为了防止这种情况, 你需要启用某种形式的 "缓存破坏 "功能, 它本质上是给上述文件添加一个唯一的哈希值, 从而迫使浏览器重新下载这些文件, 而不需要用户清除缓存或强制刷新.

Laravel mix包含了这个功能, 并且可以在webpack.mix.js文件中启用.

例如，在你的webpack.mix.js文件里面。

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

然后在你的刀片视图中导入时 确保你使用mix helper:

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

你可以在这里找到更多关于版本缓存的信息。https:/laravel.comdocs7.xmix#versioning-and-cache-busting。