如何在Gitpod代理环境下配置Nuxt 3 + Vite的HMR

问题核心 #

Gitpod通过反向代理暴露服务时，每个内部端口对应独立的HTTPS公网端点（如https://3000-<container-id>.gitpod.io和https://24678-<container-id>.gitpod.io），默认HMR配置会错误地尝试通过3000端口的域名连接24678端口，导致WebSocket连接失败并触发页面无限刷新。

正确配置方案 #

修改nuxt.config.ts，利用Gitpod提供的环境变量动态配置Vite HMR的端点信息：

export default defineNuxtConfig({
  vite: {
    server: {
      hmr: {
        // 从Gitpod环境变量生成24678端口的公网域名
        host: process.env.GITPOD_WORKSPACE_URL
          ? process.env.GITPOD_WORKSPACE_URL.replace('https://', '24678-')
          : 'localhost',
        protocol: 'wss',
        clientPort: 443
      }
    }
  }
})

配置说明 #

• 动态生成HMR主机地址：Gitpod会自动设置GITPOD_WORKSPACE_URL环境变量，格式为https://<workspace-id>.gitpod.io。通过替换前缀生成24678端口对应的公网域名，确保前端连接到正确的HMR服务端点。
• WebSocket协议与端口：Gitpod公网端点使用HTTPS，因此WebSocket需用wss协议；公网HTTPS默认端口为443，Gitpod反向代理会自动将其映射到内部的24678端口。
• 移除不必要的代理配置：无需通过3000端口代理/_nuxt路径，前端直接连接24678端口的HMR端点即可。

验证步骤 #

1. 执行yarn dev启动Nuxt开发服务器
2. 打开3000端口对应的Gitpod公网地址
3. 在浏览器开发者工具的「Network」标签中，检查WebSocket连接：
   • 正确的连接地址应为wss://24678-<container-id>.gitpod.io/_nuxt/
   • 连接状态显示为「已建立」，无失败报错
4. 修改项目代码，页面应自动热更新，无无限刷新循环

内容的提问来源于stack exchange，提问作者Dave Gööck