Codespaces中Vite启动Vue预览URL重复，路由失效求排查方法

在GitHub Codespaces里运行Vue应用，用Vite启动预览服务器时，浏览器地址栏出现重复URL：

https://blabla-pxjcg97-3000.app.github.dev/https://blabla-pxjcg97.github.dev/

这直接导致路由完全无法正常工作。想问下该怎么调试这个问题？这是Vite、Codespaces还是Vue的问题？有没有人碰到过类似情况？

我的Vite配置如下：因为Firefox有个会导致浏览器不断重载的bug，所以不得不加clientPort配置：

import { fileURLToPath, URL } from 'url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
      hmr: {
        clientPort: process.env.CODESPACES ? 443 : undefined
    }
  },
})

调试方案&问题定位 #

1. 优先排查Vite配置适配问题 #

• 补充server.host配置：Codespaces环境下必须显式设置host: '0.0.0.0'，否则Vite无法正确暴露服务给Codespaces的反向代理，容易触发URL解析异常。
• 添加server.origin强制指定域名：避免Vite自动推导URL时出错，示例配置：

  server: {
    host: '0.0.0.0',
    origin: process.env.CODESPACES ? `https://${process.env.CODESPACE_NAME}-3000.app.github.dev` : undefined,
    hmr: {
      clientPort: process.env.CODESPACES ? 443 : undefined
    }
  }
  

• 临时移除clientPort测试：虽然Firefox的重载bug存在，但可以先去掉该配置确认是否是它导致的URL重复。如果是，建议尝试升级Vite到最新版本（新版本大概率修复了该bug），再恢复配置。

2. 检查Vue Router配置 #

• 确认路由的base属性：必须使用import.meta.env.BASE_URL（默认值为/），不要硬写完整域名。示例：

  const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    // 路由规则...
  })
  

  硬写域名会导致路由跳转时重复拼接URL。

3. 问题来源判断 #

• 核心原因是Vite的URL自动推导逻辑与clientPort配置在Codespaces反向代理环境下的冲突：指定clientPort:443后，Vite错误地将完整域名拼接到了预览URL后面。
• Vue本身不会直接导致URL重复，除非路由base配置错误；Codespaces的域名映射机制本身正常，问题出在本地服务配置与反向代理的交互上。

4. 类似情况参考 #

不少开发者在Codespaces+Vite环境下碰到过同类URL拼接问题，大多通过补充host和origin配置解决。

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