Windows11桌面版VSCode中GitHub Codespaces的VueJS端口异常问题

问题描述 #

在Windows 11系统桌面版VSCode中创建并打开空白仓库的GitHub Codespace，执行以下操作初始化Vue项目：

npm create vue@latest .

选择配置：

• 启用TypeScript
• 启用JSX Support
• 启用Vue Router
• 启用Pinia
• 启用Vitest
• 不添加端到端测试方案
• 启用ESLint
• 启用Prettier

随后执行标准命令：

npm install
npm run format
npm run dev

终端提示项目可在5173端口访问，但浏览器打开localhost:5173无响应；端口列表显示自动转发，但未与Codespace内端口连通。尝试将端口从私有改为公开会导致Codespace崩溃，而网页版VSCode执行npm run dev则正常，不想使用网页版是因为按Ctrl+W会误关Codespace。

解决方案 #

• 强制Dev服务器绑定全局地址
  修改项目根目录下的package.json，将dev脚本改为：

  "scripts": {
    "dev": "vite --host 0.0.0.0",
    // 其他脚本保持不变
  }
  

  保存后重新执行npm run dev，此时Vite会绑定Codespace的所有网络接口，确保端口转发能正常连通。

• 重新配置端口转发

  1. 打开VSCode命令面板（Ctrl+Shift+P），输入「Ports: Focus on Ports View」打开端口面板
  2. 找到5173端口，右键选择「Forward Port」，确认本地映射地址为localhost:5173
  3. 保持端口「Visibility」为私有，无需改为公开，私有状态已足够本地桌面访问

• 重建Codespace实例

  1. 关闭当前桌面版VSCode中的Codespace连接
  2. 打开GitHub仓库的Codespaces页面，找到对应实例，点击「...」选择「Rebuild」
  3. 重建完成后重新打开桌面版VSCode的Codespace，重新执行npm install和npm run dev

• 更新VSCode及扩展

  • 检查并更新桌面版VSCode到最新版本
  • 在VSCode扩展市场中，确保「GitHub Codespaces」扩展为最新版本，旧版本可能存在端口转发兼容性问题

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