Laravel-Mix + BrowserSync 未在 localhost:3000 加载

Question

我正在尝试设置 BrowserSync 以使用我的 Laravel 项目。但是，当我运行 npm run watch 时，localhost:3000 不会加载。我在终端中没有收到任何编译错误。有趣的是，localhost:3001 上的 UI 仪表板运行良好。

如果我运行 php artisan serve, localhost:8000 加载正常，但当然，它与 BrowserSync 没有连接。

我的 webpack.mix.js 文件如下所示：

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

mix.browserSync({proxy:'localhost:3000'});

我使用的是以下版本：

Laravel-Mix: 4.0.7

browser-sync: 2.26.7

webpack-dev-server: 3.8.0

browser-sync-webpack-plugin: 2.0.1

有什么想法吗？

Answer 1

安装这两个插件：

“浏览器同步”：“^2.26.5”
"browser-sync-webpack-plugin": "^2.0.1",

mix.browserSync('http://localhost:8000/');

Answer 2

我能够通过将 injectChanges: false 添加到我的 browsersync 行的 brosersync 重新加载。

Answer 3

你必须这样做：

mix.browserSync({
    proxy: "http://localhost:8000"
});

Answer 4

In your webpack.mix.js, add the following:

  mix.browserSync({
        proxy: "http://localhost:8000"
    });

After that, run the following commands

**npm uninstall browser-sync-webpack-plugin**
**npm install browser-sync-webpack-plugin**

The above will automatically open **http://localhost:3000/** on your browser

Answer 5

在标记前添加此脚本：

document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.27.7'><\/script>".replace("HOST", location.hostname));

如果不起作用，请像这样更改您的 webpack.mix.js 和上面的脚本标签：

const mix = require("laravel-mix");

//Compiling scss to css
mix.sass("public/assets/css/style.scss", "public/assets/css/style.css");

mix.browserSync({
    proxy: "http://localhost/myapp/", //Your host
    files: [ //Files for watching
        "./app/**/*",
        "./routes/**/*",
        "./public/assets/css/*.css",
        "./public/js/*.js",
        "./resources/views/**/*.blade.php",
        "./resources/lang/**/*",
    ],
});

然后运行: npm 运行 watch

Answer 6

当您通过 php artisan serve 启动 Laravel 服务器时，这将在终端中打印：

Starting Laravel development server: http://127.0.0.1:8000

启动 Laravel 服务器后，我将 webpack.mix.js 文件中的代码更改为：

mix.browserSync();

对此：

mix.browserSync({
    proxy: "http://127.0.0.1:8000",
});

Laravel-Mix + BrowserSync 未在 localhost:3000 加载

Laravel-Mix + BrowserSync Not Loading at localhost:3000

laravel

webpack

browser-sync

webpack-dev-server

laravel-mix