Docker中Vue3 Vite应用VS Code调试时页面空白问题

问题根源 #

从你提供的netstat输出可以明确：Vite在debug模式下仅绑定了127.0.0.1:8080，这导致服务只能在容器内部的localhost访问，外部（包括主机）无法正常连接，最终页面空白。而npm run dev能正常运行，说明dev命令默认或配置了--host参数，让服务监听所有网卡。

修复方案 #

1. 修改package.json的debug命令 #

给vite添加--host参数，强制服务监听所有网卡：

"debug": "node --inspect-brk=0.0.0.0:9229 node_modules/vite/bin/vite.js --host"

也可以明确指定绑定地址：

"debug": "node --inspect-brk=0.0.0.0:9229 node_modules/vite/bin/vite.js --host 0.0.0.0"

2. 验证修复结果 #

重启容器后，在容器内执行netstat -tuln，确认输出中显示0.0.0.0:8080处于LISTEN状态，而非127.0.0.1:8080。

3. 全局配置优化（可选） #

如果不想每次命令都加参数，可直接在vite.config.js中配置server.host：

server: {
  host: '0.0.0.0', // 新增该行，让服务默认监听所有网卡
  hmr: { host: '0.0.0.0' },
  // 其他原有配置...
}

这样dev和debug模式都会统一监听0.0.0.0，无需重复配置命令参数。

补充说明：telnet异常原因 #

虽然端口映射已生效，但容器内服务仅监听127.0.0.1，所以主机端telnet连接建立后会被服务直接关闭，表现为“Connection closed by foreign host”，这也印证了服务未对外开放的问题。

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