VSCode怎么配置Vite项目的开发环境

林译川

2026-09-10 • 👁 0人浏览过

VSCode调试Vite项目断点不生效的主因是三处配置链断裂：vite dev服务未启动、launch.json的url与浏览器地址不一致、Volar未启用Take Over Mode；需确保服务运行、url完全匹配、使用pwa-chrome类型、webRoot设为${workspaceFolder}、Volar启用Take Over Mode并完全重启VSCode。 VSCode 调试 Vite 项目断点不生效，基本不是插件没装或 VSCode 版本低，而是三处配置链断裂： vite dev 服务未启动、

launch.json

的

url

与浏览器地址栏不一致、Volar 未启用 Take Over Mode。确保 vite dev 服务已运行且端口匹配 Vite 不提供调试协议入口，VSCode 是通过 attach 浏览器实现调试的。必须先手动执行

vite

或

vite dev

启动开发服务器，再点 VSCode 的 Launch 按钮 —— 后者只是打开浏览器并自动 attach，不是启动 vite 进程本身。

url

字段必须和终端里 vite 输出的地址完全一致（含协议、端口、路径），比如终端显示

http://localhost:3000

，就不能写成

http://127.0.0.1:3000

或漏掉

http://

如果改过

vite.config.ts

中的

server.port

（如设为

8080

），

launch.json

里的

url

也必须同步改成

"http://localhost:8080"

别用

vite build && vite preview

：那是静态产物，无 source map、无 HMR、无法调试 launch.json 必须用 pwa-chrome 类型 + 正确 webRoot 旧版

type: "chrome"

在 VSCode 1.8+ 已弃用，会导致连接失败；

webRoot

错误则所有断点显示「未绑定」。必须用

"type": "pwa-chrome"

（或

"pwa-msedge"

），不能用

"chrome"

"webRoot": "${workspaceFolder}"

—— 不是

"${workspaceFolder}/src"

，否则

vite.config.ts

或根目录脚本里的断点会失效

sourceMapPathOverrides

在标准 Vite 项目中通常不需要；若删掉后仍断点灰色，才考虑加最简映射：

"*": "${webRoot}/*"

Volar 必须启用 Take Over Mode 并禁用 Vetur Vue 3 + Vite 项目里，Vetur 已废弃，它和 Volar 冲突会导致