Laravel 8 jetstream 热重载和浏览器同步不起作用

Question

我刚刚创建的系统有一个大问题。

我使用 docker 和 laravel sail 进行了 Laravel 8 with jetstream 的标准安装...

但是，我无法执行npm run hot或npm run watch自动重新加载或浏览器同步...

我的文件是 laravel 8 的标准文件，我还没有对代码进行任何更改。

信息：

• 拉拉维尔：v8.41.0
• PHP：PHP v8.0.5
• 捷流：v2.3.5
• npm：v7.7.6
• NodeJS：v15.14.0

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

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

我的webpack.config.js样子是这样的：

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

我还尝试使用我之前在研究中发现的一些信息来更改这两个 webpack，但实际上没有任何效果，是否有办法让热重载和浏览器同步与 Laravel Sail 一起工作？

Answer 1

虽然 browsersync 脚本已经包含在app.blade.php我也没有让它工作。我删除了该行并扩展webpack.mix.js如下：

mix.browserSync({
    proxy: 'YOURDOMAIN.test',
    host: 'YOURDOMAIN.test',
    open: 'external'
});

然后运行npm run watch​​- 可能运行两次，因为它将安装 browsersync - 并且它正在工作。