Laravel 5.4 - Mix - 如何运行浏览器实时重新加载

Question

我在我的项目中使用 Laravel 5.4 并尝试使用 Mix 设置前端构建系统。一切正常，除了我无法获得浏览器自动重新加载选项。文档上没有关于它的任何内容。

有人请帮助，我该如何实现？

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.

请检查 mix 更新文档 on github

重要更新结束

根据文档，您只需要在您的项目和脚本中运行 npm run hot 或 style-sheet 参考使用：

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

因此 mix() 函数会将您的资产 url 指向 http://localhost:8080/。

buuuuuuuut...如您所见here，这正是文档所说的内容。我无法在 laravel 全新安装运行ning arch linux 上运行，所有内容都按预期编译并且 mix() 函数指向 8080但没有注射任何东西，我回到了 Ctrl+R 年龄。

祝你好运！

Answer 2

是的，我一直遇到同样的问题，我会说坚持使用长生不老药，因为如果你看看 github 它一团糟。从 bootstrap 加载字体有问题，组合方法流有问题，太多的问题甚至无法详述。它太新了，他们没有解决所有问题。

我的 2 美分是，如果你要升级到新的东西，至少要确保开箱即用的长生不老药上的任何东西都是混合的。

Answer 3

您仍然可以使用 browser-sync。 Laravel 5.4 随 webpack 一起提供，并且有一个插件：browser-sync-webpack-plugin.

安装browser-sync的东西：

npm install --save-dev browser-sync browser-sync-webpack-plugin
加入webpack.mix.js:

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

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

将此代码段添加到页面底部 </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

Answer 4

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

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

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

如下：

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

Answer 5

接下来我要做的项目：

1) 安装 chrome 浏览器扩展 Livereload https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2) 全局安装 livereload（通过 CLI）：

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 按钮

就是这样！

Laravel 5.4 - Mix - 如何运行浏览器实时重新加载

Laravel 5.4 - Mix - How to run browser live reload

laravel

laravel-mix

laravel-elixir

重要更新！

重要更新结束

Laravel 5.4 - Mix - 如何 运行 浏览器实时重新加载

Laravel 5.4 - Mix - How to run browser live reload

laravel

laravel-mix

laravel-elixir

重要更新！

重要更新结束

Laravel 5.4 - Mix - 如何运行浏览器实时重新加载