Docker环境下Laravel项目webpack-mix的browserSync配置问题求助

问题核心原因 #

原有配置存在3个核心问题：

1. browserSync的host没有设为0.0.0.0，仅监听容器内部回环地址，宿主机无法访问
2. open: 'external'会触发容器内打开浏览器的操作，容器无桌面环境会报错
3. proxy配置未指定端口，可能出现服务解析失败的情况

解决步骤 #

• 第一步：更新webpack.mix.js配置
  根据你运行npm命令的环境选择对应配置：
  情况1：在Docker容器内运行npm run watch，配置如下：

  mix.browserSync({
      host: '0.0.0.0',
      proxy: '127.0.0.1:80',
      port: 3000,
      ui: {
          port: 3001
      },
      notify: false,
      open: false
  });
  

  情况2：在宿主机本地运行npm run watch，配置如下：

  mix.browserSync({
      host: 'vokl-app.test',
      proxy: 'vokl-app.test',
      port: 3000,
      ui: {
          port: 3001
      },
      notify: false
  });
  

• 第二步：配置宿主机hosts文件
  Windows系统路径：C:\Windows\System32\drivers\etc\hosts
  Mac/Linux系统路径：/etc/hosts
  在文件末尾添加以下内容：

127.0.0.1 vokl-app.test

• 第三步：启动服务
  先启动Docker容器，再根据你选择的运行环境执行npm run watch，启动完成后在浏览器访问http://vokl-app.test:3000即可使用browserSync的自动同步功能，修改blade、js、css等前端相关文件会自动刷新页面。

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