Laravel 8 Jetstream 热重载和浏览器同步不工作

Question

我创建的系统出现了一个大问题。

我使用Docker和Laravel Sail进行标准安装，安装了Laravel 8和Jetstream...

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

我的文件与 Laravel 8 标准相同，我还没有对代码进行任何更改。

信息如下：

- Laravel：v8.41.0 - PHP：PHP v8.0.5 - Jetstream：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，但实际上什么都没用。是否有办法让Hot Reload和Browser Sync与Laravel Sail一起工作？

- Yago Lagrotti

Answer 1

尽管在app.blade.php中已经包含了一个浏览器同步脚本，但我仍然无法让它工作。我删除了那行代码，并按以下方式扩展了我的webpack.mix.js：

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

然后运行npm run watch（可能要运行两次，因为它会安装browsersync），它将会正常工作。

- noviolence

---

那对你有用吗？我尝试过，但browserSync不会更改主机或端口。它试图访问localhost:3000？如果脚本不再在app-template中，你如何包含它？ - C4pt4inC4nn4bis

@C4pt4inC4nn4bis，我不确切知道它是如何工作的，但它确实可以。Laravel Mix 负责处理它。只要我运行 npm run watch，输入的域名就会弹出 :3000，并且 browserSync 脚本被包含在最后。当然，该域名必须自己工作。我正在使用 Valet。 - noviolence

我也使用Valet与Laravel 8 Mix和VueJS 3相结合。这个解决方案是正确的！非常感谢。 - BossNL

Answer 2

打开：'external' 保存我（同样我使用 valet 和 https）

.browserSync({
        proxy: 'https://app.tunnel.test',
        host: 'app.tunnel.test',
        open: 'external',
        https: {
            key: homedir + '/.config/valet/Certificates/' + domain + '.key',
            cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
        },
    })

- Desmarais Alexis