Docker Compose中npm run watch执行时BrowserSync无法打开浏览器的咨询

1. 修复BrowserSync自动打开浏览器的错误 #

Docker容器属于无头环境，无法直接启动浏览器，需修改webpack.mix.js配置禁用自动打开功能，同时修正拼写和路径问题：

mix.browsersync({
    proxy: 'http://localhost:8008', // 后续需根据环境调整此地址
    port: 3001,
    files: ['public/**/*.css', 'public/**/*.js'], // 用glob语法监听所有子目录下的资源文件
    open: false // 关键：禁用自动打开浏览器
});

注意：原配置中的miw是拼写错误，需改为mix。

2. 修正Docker Compose配置 #

你的docker-compose.yaml存在路径挂载和命令错误，调整如下：

services:
  npm:
    image: node:latest
    working_dir: /src
    entrypoint: ['npm']
    ports:
      - "3001:3001"
    volumes:
      - ./:/src # 挂载本地项目目录到容器，确保容器能读取源码文件
    command: ["run", "watch"] # 仅保留watch命令，原配置多写的dev、prod会导致执行冲突

3. 调整代理地址（核心步骤） #

Docker容器内的localhost指向容器自身，需根据Laravel服务的运行位置修改代理地址：

• 若Laravel服务运行在本地宿主机（非Docker容器）：
  • Windows/macOS：使用http://host.docker.internal:8008
  • Linux：使用宿主机的局域网IP（如http://192.168.1.100:8008，可通过ip addr查看）
• 若Laravel服务运行在另一个Docker容器（如容器名为laravel-app，端口8000）：
  • 代理地址改为http://laravel-app:8000

4. 启动监听并验证 #

执行命令启动监听：

docker compose run --rm npm run watch

在本地浏览器手动访问http://localhost:3001，修改本地CSS/JS文件后，浏览器会自动刷新页面，实现资源变更监听。

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