无法连接Docker容器中的Vue应用（Vue+Flask+Docker架构）

问题根源 #

你的前端容器中，serve命令默认监听localhost:3000，但Docker容器内的服务必须绑定0.0.0.0才能被主机访问；同时端口配置存在不匹配：Dockerfile声明暴露5000端口，但serve实际运行在3000端口，导致端口映射失效。

修复步骤 #

1. 修改前端Dockerfile，指定serve的监听地址和端口

将Dockerfile中的最后一行CMD命令修改为：

CMD [ "serve", "-s", "dist", "-l", "0.0.0.0:5000"]

• -l 参数用于指定服务的监听地址和端口，0.0.0.0 允许容器接收来自外部的请求，端口设为5000与你声明的EXPOSE 5000保持一致。

2. 确认端口映射配置

你的docker-compose.yml中前端的端口映射8080:5000是正确的，主机的8080端口会转发到容器内的5000端口，无需修改。

3. 移除无效的devServer配置

你在vue.config.js中添加的devServer配置仅对开发环境（npm run serve）生效，而当前你是通过npm run build生成生产包后用serve启动，该配置不会起作用，可以删除。

验证 #

重新构建并启动容器：

docker-compose down && docker-compose up --build

此时前端容器日志应显示Accepting connections at http://0.0.0.0:5000，访问localhost:8080即可正常打开前端页面。

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