Laravel Mix + BrowserSync 开箱即用无限加载答案

【问题标题】：Laravel Mix + BrowserSync infinite loading out of the boxLaravel Mix + BrowserSync 开箱即用无限加载
【发布时间】：2018-09-16 10:14:39
【问题描述】：

安装了browser-sync 和browser-sync-webpack-plugin 的开箱即用Laravel 项目在浏览器同步页面上无限加载。它在 http://localhost 上运行良好，但浏览器同步 (localhost:3000) 版本不会停止加载并且不显示任何内容，只是一个白页。

我发现this 的问题与我的类似，但没有任何答案。

这只是最近才开始在我的机器上发生。起初我以为是因为防病毒或防火墙，但禁用它们并没有什么好处。我什至无法弄清楚是什么导致页面永远无法加载。

这是我的 webpack.mix.js 文件的样子：

mix.js('resources/assets/js/script.js', 'public/js')
.sass('resources/assets/sass/main.scss', 'public/css')
.disableNotifications()
.browserSync();

编辑：任何缩小问题范围的提示也将不胜感激。

【问题讨论】：

您是在宅基地箱内运行应用程序吗？还是代客？您是否在其他浏览器中尝试过？（应该没关系，但也许？）。您使用的是 mac/windows 机器吗，因为我记得在 mac/valet 上阅读过有关本地主机问题的信息。一些可能对您的问题有用的信息。
不，不使用宅基地或代客；在所有浏览器中都尝试过，但无济于事。这是一台Windows机器，所以我想这也排除了mac问题。有什么想法可以看看它卡在哪里？比如是什么导致了无限负载？
您是否尝试将代理硬编码为您在主机文件中定义的 url？ browserSync({ proxy: 'my-domain.test' })
我必须在 hosts 文件中添加 my-domain.test 并且它起作用了！

标签： laravel webpack browser-sync laravel-mix

【解决方案1】：

Laravel 中使用的 mix-browsersync 包的默认代理目标是app.test。

您可以在混合文件中指定不同的代理目标：

mix
    .sass('resources/sass/app.scss', 'public/css')
    .js('resources/js/app.js', 'public/js')
    .browserSync('localhost');

而且，如果您像我一样使用 artisan 服务器进行开发，您甚至可以针对它（只要您在项目中运行 php artisan serve）：

mix
    .sass('resources/sass/app.scss', 'public/css')
    .js('resources/js/app.js', 'public/js')
    .browserSync('localhost:8000');

【讨论】：

【解决方案2】：

对我来说，问题在于将 browsersync 代理到的任何 url 添加到 windows hosts 文件中，并将其指向 127.0.0.1。

【讨论】：