Laravel 5.4 - Mix - 如何实现浏览器自动刷新

Question

我正在使用Laravel 5.4开发我的项目，并试图使用Mix设置前端构建系统。除了无法获得浏览器自动重新加载选项外，一切都正常运行。文档中没有相关说明。

请问有谁能帮忙解决这个问题吗？

- toothful

---

请看我的答案。 - zhekaus

Answer 1

重要更新！

忘记我之前说的话，现在 Laravel Mix 已经更新，功能和文档都有一些改进。

现在你可以简单地：

mix.browserSync('my-domain.dev');

// Or:

mix.browserSync({
    proxy: 'my-domain.dev'
})

然后运行npm run watch，你就准备好了！

如果你想更新webpack版本，请将package.json中的版本更改为*：

"laravel-mix": "*",

并运行 npm update laravel-mix。

请查看在 github 上更新的 Laravel Mix 文档文档

重要更新结束

根据文档，您只需要在项目中运行npm run hot，并在脚本或样式表引用中使用:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

然后，mix()函数将把您的资产 url 指向http://localhost:8080/。

但是...这只是文档所说的，正如您可以在这里看到的那样。我在运行 arch linux 的 laravel 新安装上无法使其工作，一切都编译得很好，mix() 函数指向 8080，但是没有任何东西被注入，我回到了Ctrl+R时代。

希望您好运！

- Edu Ruiz

---

selim-mahmud（无法标记您）和@jayswager，请看一下我的更新，现在一切都正常工作了。 :) - Edu Ruiz

按照标准的 Laravel 文档并运行 npm update laravel-mix 对我有用，谢谢 +1。 - Rob

Answer 2

你仍然可以使用browser-sync。

Laravel 5.4附带了webpack，还有一个插件：browser-sync-webpack-plugin。

1. 安装browser-sync的东西:

   npm install --save-dev browser-sync browser-sync-webpack-plugin

2. 添加到webpack.mix.js：

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

mix.webpackConfig({
   plugins: [
       new BrowserSyncPlugin({
           files: [
               'app/**/*',
               'public/**/*',
               'resources/views/**/*',
               'routes/**/*'
           ]
       })
   ]
});

3. 将以下代码片段添加到页面底部，即在 </body> 标签之前：

@if (getenv('APP_ENV') === 'local')
<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.6'><\/script>".replace("HOST", location.hostname));
    //]]>
</script>
@endif

同时启动 Laravel 和 webpack-dev-server：

php artisan serve & npm run watch

- zhekaus

---

如何在 assets/js 文件被修改后重新编译或触发 gulp (elixir)？我能否将此配置放在我的 gulpfile 中？ - blamb

Answer 3

是的，我也遇到了同样的问题。我建议还是坚持使用Elixir，因为如果你看看Github上的情况，那完全就是一团糟。Bootstrap加载字体的问题，合并方法流的问题，太多问题了，无法详细说明。它太新了，他们没有修复所有问题。

我的建议是，如果你要升级到新的东西，至少确保Elixir默认支持的内容在Mix中也能运行。

- Jayswager

---

我在这方面和你持相同的看法，来自hrm网站本身的声明：“请注意，热模块替换（HMR）仍然是一个实验性功能。” “它是实验性的，没有经过充分测试。” “预计会有一些错误。” “理论上可用于生产，但对于一些严肃的事情来说，现在使用可能还为时过早。” - Edu Ruiz

你仍然可以使用 browser-sync。Laravel 5.4 随附了 webpack，并为其提供了一个插件：browser-sync-webpack-plugin。 - zhekaus

Answer 4

我的项目中我会做以下操作：

1）安装 Chrome 浏览器扩展程序 Livereload：https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2）通过命令行界面全局安装 Livereload：

npm install -g livereload

或者在项目文件夹中本地安装（通过 CLI）:

npm install livereload

3) 将以下片段放入您的 layout.blade.php 或其他模板中：

<script>
   document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

4) 在你的项目文件夹中运行livereload（通过CLI）：

livereload

5) 在Chrome浏览器中按下livereload按钮。

就是这样！

- Viktor Matushevskyi

Answer 5

如果有人需要另一种方法来使它工作，例如如果在后端没有使用mix，则这是我解决它的方法：

从项目根目录中编辑 server.php 并替换 return false;：

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
    return false;
}

as follows:

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {

    // set log file for debugging purposes if needed
    #ini_set('error_log', __DIR__ . '/storage/logs/laravel.log');

    header("HTTP/1.1 301 Moved Permanently");
    header("Location: http://localhost:8080" . $uri);

    exit();
}

当然，你需要同时启动artisan serve和npm run hot。

- CodeXP