怎样在vscode中配置Vue.js项目的开发与调试【教程】

VS Code 调试 vue 需 Volar 插件 + 正确 launch.json 配置 + source map 支持；必须启用 Take Over Mode、设对 webRoot 为 ${workspaceFolder}、确保浏览器加载了 webpack:// 源码树。

VS Code 本身不内置 Vue 调试能力，必须靠插件 + 正确的启动配置协同工作；直接装个插件点 F5 就断点，基本会失败。

安装必备插件：Volar 而不是 Vetur

Vetur 已废弃，Vue 3 项目必须用 Volar（官方推荐）。它提供语法高亮、template 内响应式类型推导、ref/computed 自动补全。安装后需在 VS Code 设置中禁用 Vetur（如有），否则两者冲突导致 script setup 无法识别、跳转失效。

• 打开 Extensions（Ctrl+Shift+X），搜 Volar，安装并重载窗口
• 进入 Settings → Extensions → Volar，勾选 Enable Take Over Mode（接管 TS/JS 语言服务）
• 确保项目根目录有 tsconfig.json 或 jsconfig.json，否则 Volar 的类型提示会降级

配置 launch.json 启动调试：关键在 url 和 webRoot

Vue CLI 或 vite 项目默认不启用 source map 的远程调试支持，launch.json 必须显式指向开发服务器地址，并告诉 Debugger 源码映射位置。常见错误是写错 webRoot（应为项目根目录，不是 src），或漏掉 sourceMappathOverrides 导致断点灰色不可用。

• 在项目根目录创建 .vscode/launch.json，内容如下：

{   "version": "0.2.0",   "configurations": [     {       "type": "pwa-chrome",       "request": "launch",       "name": "Launch Chrome against localhost",       "url": "http://localhost:5173",  // Vite 默认端口；Vue CLI 是 8080       "webRoot": "${workspaceFolder}",       "sourceMapPathOverrides": {         "webpack:///src/*": "${webRoot}/src/*",         "webpack:///./src/*": "${webRoot}/src/*",         "webpack:///src/.": "${webRoot}/src"       }     }   ] }

• url 必须与你实际运行 npm run dev 后浏览器访问的地址完全一致（含端口）
• 若用 firefox，改 type 为 pwa-firefox，并确保已安装 Firefox Developer Edition

确保构建工具生成 source map：Vite / Vue CLI 配置检查

即使 launch.json 写对，如果开发服务器没发 source map，Debugger 仍无法关联源码。Vite 默认开启，但 Vue CLI 项目需确认 vue.config.js 中未关闭。

立即学习“前端免费学习笔记（深入）”；

• Vite 项目：检查 vite.config.ts 是否存在 build.sourcemap: false —— 删除或设为 true
• Vue CLI 项目：检查 vue.config.js 中是否有 devServer.devMiddleware.writeToDisk: true（非必需，但某些代理场景需要）；重点确认 configureWebpack 里没覆盖 devtool 为 false
• 运行 npm run dev 后，在浏览器 DevTools 的 Sources 面板下，展开 webpack:// 节点，应能看到项目 src 目录结构 —— 这是 source map 生效的直接证据

在 中打断点失败？检查 Volar 的 TS 服务模式

这是最常被忽略的一环：Volar 在 Take Over Mode 下会接管 TS 语言服务，但 VS Code 的内置 JS/TS 插件可能仍尝试解析 setup 语法，导致断点不命中、console.log 行号错位。

• 务必确认已启用 Enable Take Over Mode（前面已提），且重载了窗口
• 打开任意 .vue 文件，在右下角状态栏点击 typescript 版本标识，确认显示的是 Volar (TS Server)，而非 Typescript (Bundled)
• 如仍无效，尝试在 .vue 文件顶部加 // @ts-nocheck 临时绕过类型检查（仅调试用），排除类型系统干扰

真正卡住的地方往往不是配置项写错，而是 Volar 服务没接管、source map 没加载进浏览器、或者 webRoot 指向了子目录——这三者任何一个出问题，断点都会变空心圆。建议按顺序验证：先看浏览器 Sources 里有没有源码树，再看 VS Code 状态栏语言服务名，最后核对 launch.json 的路径映射逻辑。