MAC M1 ARM架构下无法连接本地Docker容器内的Vue应用

以下是针对你的情况的排查和解决方案：

• 确认Vue开发服务器监听地址
  Vue默认devServer只监听localhost，容器内的localhost和主机不属于同一网络空间，必须改成0.0.0.0才能让外部访问。检查项目根目录的vue.config.js（没有则新建），添加或修改配置：

  module.exports = {
    devServer: {
      host: '0.0.0.0',
      port: 8080
    }
  }
  

• 检查Dockerfile启动配置
  确认Dockerfile-hotswap里的启动命令正确（比如npm run serve），且没有额外限制端口。建议在Dockerfile中添加EXPOSE 8080声明端口，虽然host模式下不强制，但能明确服务端口。

• 验证端口监听状态

  • 在主机执行命令，检查8080端口是否被占用或监听：

    # Linux/macOS
    netstat -tulpn | grep 8080
    # 或者
    lsof -i :8080
    
    # Windows PowerShell
    netstat -ano | findstr ":8080"
    

    若无结果，说明前端服务没在8080端口启动；若有结果，确认进程属于你的前端容器。
  • 进入前端容器内部测试访问：

    docker-compose exec servicehub_front curl localhost:8080
    

    容器内部能访问但外部不行，排查主机防火墙或网络配置；内部也不行，说明服务启动失败，查看日志找原因。

• 排查权限问题
  docker-compose中设置了user: "${MYUID}:${MYGID}"，可能导致容器内用户无权限启动服务或访问挂载的代码文件。可以临时注释这一行，用root用户运行容器试试，若能正常访问，再调整权限配置。

• 调整网络模式（针对Windows/Mac环境）
  Docker Desktop在Windows和Mac上对network_mode: host的支持有限，改用端口映射更可靠：
  修改docker-compose.yml中servicehub_front的配置：

  servicehub_front:
    build:
      context: .
      dockerfile: Dockerfile-hotswap
    user: "${MYUID}:${MYGID}"
    # 注释host网络模式
    # network_mode: host
    # 添加端口映射
    ports:
      - "8080:8080"
    volumes:
      - "./:/opt/app-root/src/"
  

• 查看容器启动日志
  运行命令查看前端容器的日志，寻找服务启动异常的线索：

  docker-compose logs servicehub_front
  

  重点关注是否有报错信息，以及服务启动时显示的访问地址是否包含0.0.0.0:8080。

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