使用docker-compose运行VueJS应用无法访问localhost:8080页面如何解决

问题复现 #

• 执行构建命令生成生产构建包：
  docker-compose run node npm run build -- --mode=iso
  执行完成后项目根目录正常生成dist产物目录。
• 执行预览服务启动命令：
  docker-compose run e2e npm run serve
• 命令执行输出：

App running at:
  Local: http://localhost:8080/

 It seems you are running Vue CLI inside a container.
 Access the dev server via http://localhost:<your container’s external mapped port>/
 App is served in production mode.
 Note this is for preview or E2E testing only.

• 异常现象：按照输出提示访问对应地址，页面无法加载。
• 前置配置：node服务负责安装全量项目依赖，e2e服务负责启动预览服务，服务启动后需运行后续E2E测试流程。

排查解决步骤 #

1. 修正启动命令的端口映射逻辑 #

docker-compose run默认不会加载compose文件中为服务配置的ports端口映射规则，这是该场景下的最高发诱因。

• 临时启动时直接显式指定端口映射，将容器8080端口映射到宿主机8080端口：
  docker-compose run -p 8080:8080 e2e npm run serve
• 如果要直接复用compose文件中已经配置好的端口映射规则，启动时增加--service-ports参数：
  docker-compose run --service-ports e2e npm run serve

2. 调整Vue服务监听地址 #

容器内Vue服务默认监听127.0.0.1回环地址时，宿主机的流量无法转发到容器内部服务，会直接导致访问失败。

• 临时启动时增加参数指定服务监听所有网卡地址：
  docker-compose run --service-ports -p 8080:8080 e2e npm run serve -- --host 0.0.0.0
• 固定配置可直接修改项目根目录下的vue.config.js，无需每次启动传参：

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

3. 校验卷挂载一致性 #

确认node服务和e2e服务的卷挂载规则一致：两个服务需要将宿主机项目根目录挂载到容器内相同工作路径，避免e2e服务读取不到node服务生成的dist目录，导致服务启动异常。
参考compose配置示例：

services:
  node:
    build: ./node
    volumes:
      - ./:/app
    working_dir: /app
  e2e:
    build: ./e2e
    volumes:
      - ./:/app
    working_dir: /app
    ports:
      - "8080:8080"
    depends_on:
      - node

4. 校验访问地址 #

• 服务正常启动后，不要访问日志里打印的容器内地址http://localhost:8080，该地址仅在容器内部生效，直接访问宿主机的http://localhost:8080即可。
• 如果服务部署在远程服务器上，将localhost替换为服务器实际IP，同时确认服务器防火墙、安全组已放行8080端口入站流量。

5. E2E测试适配 #

如果后续运行自动化E2E测试，不需要把服务端口映射到宿主机，直接把E2E测试容器加入同一个docker网络，通过e2e容器名+内部8080端口访问服务即可，避免出现端口冲突。

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