Laravel 8搭配Jetstream使用Sail时热重载与Browser Sync失效问题求助

一、核心原因 #

默认 Laravel Mix 配置适配本地非容器环境，Sail 容器场景下存在端口未映射、热重载服务监听地址受限两个核心问题，按以下步骤修改即可正常使用：

二、npm run hot 配置修改 #

1. 调整 docker-compose.yml 端口映射 #

在 laravel.test 服务的 ports 节点下新增热重载端口映射：

services:
    laravel.test:
        ports:
            - '80:80'
            - '8080:8080' # 新增热重载端口
            - '5173:5173' # 高版本Mix/Vite兼容端口，可选

修改后重启 Sail 生效：
./vendor/bin/sail down && ./vendor/bin/sail up -d

2. 修改 webpack.mix.js 配置 #

新增 devServer 相关配置，完整配置如下：

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

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig({
        resolve: {
            alias: {
                '@': path.resolve('resources/js'),
            },
        },
        // 新增热重载配置
        devServer: {
            host: '0.0.0.0',
            port: 8080,
            public: 'localhost:8080',
            disableHostCheck: true,
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        }
    });

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

修改后可以删除原有的独立 webpack.config.js 文件，避免配置冲突。

3. 运行热重载命令 #

必须在 Sail 容器内执行命令，不要使用本地 npm：
./vendor/bin/sail npm run hot

三、Browser Sync 配置修改 #

如果需要使用 Browser Sync 功能，在上述配置基础上追加配置即可：

1. 新增端口映射 #

在 docker-compose.yml 的 laravel.test 服务 ports 节点下新增：

- '3000:3000' # Browser Sync 访问端口
- '3001:3001' # Browser Sync 管理后台端口，可选

修改后重启 Sail 生效。

2. 追加 Browser Sync 配置 #

在 webpack.mix.js 末尾追加：

if (!mix.inProduction()) {
    mix.browserSync({
        proxy: 'http://laravel.test', // Sail 容器内web服务地址
        host: 'localhost',
        open: false, // 启动时不自动打开浏览器，按需开启
        port: 3000,
        files: [
            'resources/**/*.blade.php',
            'resources/**/*.js',
            'resources/**/*.vue',
            'resources/**/*.css',
            'public/**/*.js',
            'public/**/*.css'
        ]
    });
}

3. 运行命令 #

./vendor/bin/sail npm run watch 或 ./vendor/bin/sail npm run hot 均可触发 Browser Sync 自动重载。

四、注意事项 #

• 所有前端相关命令必须通过 sail npm 执行，避免本地环境与容器环境依赖不一致
• Blade 模板中必须使用 mix() 函数加载静态资源，不要硬写资源路径
• 若使用自定义域名访问项目，将 devServer.public 和 browserSync.host 修改为对应域名即可

内容的提问来源于stack exchange，提问作者Yago Lagrotti