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

Posted 2023-02-22

【中文标题】Laravel 8 jetstream 热重载和浏览器同步不起作用

【英文标题】：Laravel 8 jetstream hot reload and browser sync do not work

【发布时间】：2021-08-04 16:12:36

【问题描述】：

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

我使用 docker 和 laravel 帆用 jetstream 完成了 Laravel 8 的标准安装...

但是，我无法执行 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 一起工作？

【参考方案1】：

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

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

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

【讨论】：

这对你有用吗？我试过了，但是 browserSync 不会改变主机或端口。它试图到达 localhost:3000？如果脚本不再包含在应用模板中，您如何包含该脚本？

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