Windows10下VSCode中Vite+Vue一键启动浏览器快捷键配置问题

方案1：修改Vite配置（最省心） #

直接在项目根目录的vite.config.js（或vite.config.ts）里添加一行配置，启动时自动打开浏览器，完全不用手动按"o"：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    open: true // 启动时自动唤起默认浏览器
  }
})

之后你原来的alt+g快捷键执行npm run dev，Vite会自动帮你打开浏览器，一步到位。

方案2：快捷键延迟发送"o"命令 #

如果不想改配置，就给快捷键加个延迟，等Vite启动完成后自动发送"o"字符。Windows下可以用timeout命令实现延迟，修改keybindings.json：

{
  "key": "alt+g",
  "command": "workbench.action.terminal.sendSequence",
  "args": {
    "text": "npm run dev\r"
  }
},
{
  "key": "alt+g",
  "command": "workbench.action.terminal.sendSequence",
  "args": {
    "text": "timeout /t 3 /nobreak >nul && echo o\r"
  },
  "when": "terminalFocus"
}

注意这里的3是延迟秒数，你可以根据自己电脑启动Vite的速度调整，确保延迟足够Vite加载完成。

或者用PowerShell整合命令，一次性发送：

{
  "key": "alt+g",
  "command": "workbench.action.terminal.sendSequence",
  "args": {
    "text": "powershell -Command \"Start-Process npm -ArgumentList 'run','dev' -NoNewWindow; Start-Sleep -Seconds 3; [Console]::WriteLine('o')\"\r"
  }
}

这个命令会先启动dev服务，等待3秒后自动输出"o"到终端，触发Vite的打开浏览器命令。

方案3：自定义NPM脚本 #

在package.json里新增一个脚本，直接调用带打开参数的Vite命令：

{
  "scripts": {
    "dev": "vite",
    "dev:open": "vite --open" // 新增启动并打开浏览器的脚本
  }
}

然后把快捷键改成执行这个新脚本：

{
  "key": "alt+g",
  "command": "workbench.action.terminal.sendSequence",
  "args": {
    "text": "npm run dev:open\r"
  }
}

效果和修改配置一致，只是把自动打开的逻辑移到了NPM脚本中。

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