VSCode调试前自动触发build任务的关键是launch配置中使用dependsOn字段指定tasks.json中label完全匹配的构建任务，且该task需禁用isBackground、设group为"build"、用"command":"npm"+"args":["run","build"]确保跨平台稳定执行。
调试前自动触发 build 任务的关键配置点
VSCode 不会自动在调试前执行任何前置命令，必须显式声明依赖关系。核心是用 dependsOn 字段让 launch 配置“等待”另一个 task 完成，且该 task 必须能被正确识别并退出（不能是长期运行的 watch 模式）。
常见错误是把 npm run build 和 npm run dev 混为一谈：调试前需要的是**一次性构建产物**，不是启动开发服务器。Vite 的 build、Webpack 的 webpack --mode=production 才符合要求；而 vite build 默认输出到 dist/，webpack 默认输出到 dist/main.js，路径不匹配会导致调试时找不到 source map。
-
dependsOn的值必须和tasks.json中某个 task 的label完全一致（区分大小写） - task 本身不能设
isBackground: true，否则 VSCode 认为它“永不结束”，launch 就一直卡住 - 如果 task 报错（比如 TypeScript 编译失败），launch 会中止，不会继续调试——这是预期行为，不是 bug
- Vite 项目务必确认
vite.config.ts中build.sourcemap: true已开启，否则断点无效
tasks.json 中 build 任务的最小安全写法
很多人的 tasks.json 写了 "command": "npm run build"，但实际应拆成 "command": "npm" + "args": ["run", "build"]。前者在 Windows 上容易因空格或引号解析失败，后者稳定跨平台。
还要加 "group": "build"，这样 VSCode 才能在 launch 配置里通过 dependsOn 正确识别它属于构建类任务。
{
"version": "2.0.0",
"tasks": [
{
"label": "vite:build",
"type": "shell",
"command": "npm",
"args": ["run", "build"],
"group": "build",
"presentation": {
"echo": true,
"reveal": "silent",
"focus": false,
"panel": "shared",
"showReuseMessage": true,
"clear": true
},
"problemMatcher": ["$tsc"]
}
]
}
- 不要用
"type": "process"调 npm，它不支持 shell 语法（如管道、重定向），也不处理 Windows 的npm.cmd包装器 -
"panel": "shared"避免每次调试都弹新终端，复用同一个面板更清爽 -
"clear": true确保每次 build 日志干净，不和上次混在一起 - 如果你的
package.json里 build 脚本是"build": "vite build"，那 label 就叫vite:build；如果是"build": "webpack --mode=production"，就叫webpack:build，保持语义一致
launch.json 如何绑定 build 任务
关键字段只有两个：dependsOn 和 preLaunchTask 是旧版写法，已弃用；新版必须用 dependsOn，且值是字符串或字符串数组。
注意：Vite 调试必须指向实际运行的页面 URL（比如 http://localhost:5173），这个地址和你本地 vite dev 启的服务端口无关——因为你是调试 build 后的静态文件，不是 dev server。所以通常要配一个本地静态服务，比如 npx serve -s dist，再让 Chrome 打开它。
{
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch dist with build",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"trace": true,
"dependsOn": ["vite:build"],
"preLaunchTask": ""
}
]
}
-
dependsOn数组里可以写多个 task label，顺序执行；如果只写一个，不用数组也行（即"dependsOn": "vite:build"） -
preLaunchTask字段必须删掉或留空字符串，否则 VSCode 会报冲突警告 -
url必须和你手动起的静态服务端口一致；如果用npx serve -s dist，默认是:3000；如果用python3 -m http.server 8000，就得改成:8000 -
webRoot一定要是"${workspaceFolder}"，不是"${workspaceFolder}/dist"，否则 source map 映射会错位
为什么 Vite 的 build:watch 不适合放 dependsOn
vite build --watch 或 Webpack 的 --watch 模式本质是长期运行进程，没有退出信号。VSCode 的 dependsOn 机制会一直等它“完成”，结果就是调试永远不开始。
真要实现“改代码 → 自动 rebuild → 自动刷新浏览器”，应该用 Vite 自带的 dev server（npm run dev），配合 Chrome Debugger 插件或 VSCode 的 launch.json 直连 http://localhost:5173，而不是走 build 流程。
- build + debug 是发布前验证流程，适合 CI 或手动 QA
- dev + debug 是日常开发流程，适合写代码时实时断点
- 两者底层机制不同：前者依赖产物文件和 source map；后者依赖 dev server 的热更新和内联 source map
- 如果你硬要把 watch 塞进 dependsOn，唯一办法是包装一层脚本，用
timeout或kill强制中断，但极不稳定，不推荐
