Docker部署Vue+Vite项目无法在浏览器显示的问题排查求助

核心问题分析 #

1. Vite Dev Server 监听范围限制：Vite 默认开发服务器仅监听 localhost，容器内部的 localhost 与宿主机网络隔离，导致宿主机无法访问。
2. 端口映射不匹配：Dockerfile 声明暴露 5173 端口（Vite 默认端口），但 docker-compose 中却将宿主机 5173 映射到容器的 8080，端口完全不对应。

解决方案 #

1. 调整 Vite 监听地址，允许外部访问 #

两种实现方式任选其一：

• 方式一：修改项目 package.json
  在前端项目的 package.json 中，更新 dev 脚本：

  "scripts": {
    "dev": "vite --host 0.0.0.0"
  }
  

• 方式二：直接修改 Dockerfile
  无需改动项目文件，调整 Dockerfile 的启动命令：

  CMD [ "npm", "run", "dev", "--", "--host", "0.0.0.0" ]
  

2. 修正 docker-compose 端口映射 #

将 web 服务的端口映射改为：

services:
  web:
    build: ./frontend
    ports:
      - "5173:5173"  # 宿主机端口与容器内Vite服务端口保持一致

3. 可选：通过 Vite 配置文件固化设置 #

如果项目存在 vite.config.js（或 .ts），可直接在配置中指定监听规则：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',  // 允许所有网卡访问
    port: 5173        // 明确端口，与Docker配置对齐
  }
})

验证步骤 #

1. 重新构建并启动前端服务：

   docker-compose up --build web
   

2. 查看前端容器日志，确认输出包含类似内容：

   Local:   http://localhost:5173/
   Network: http://172.18.0.3:5173/
   

   出现 Network 地址则说明服务已正确监听所有网卡。
3. 在宿主机浏览器访问 http://localhost:5173，验证页面可正常加载。

内容的提问来源于stack exchange，提问作者Dairelys García Rivas