Vue CLI项目需Node调试时应使用--inspect-brk启动并attach，而非launch模式，因vue-cli-service被npm wrapper封装导致VSCode无法直接执行；正确做法是新增debug:serve脚本、配置attach模式launch.json，在终端运行后手动attach。
vue-cli 项目默认走浏览器调试路径，但如果你明确需要 基于 Node 环境调试（比如想断点进入 vue-cli-service 启动逻辑、自定义 webpack 配置加载过程、或调试 CLI 内部插件行为），那就不能用 Chrome 调试器，得直接 attach 到 Node 进程。
这和“在浏览器里调试 Vue 组件”是两回事——后者靠 sourcemap + 浏览器 DevTools；前者是调试构建工具链本身，属于开发/维护脚手架的场景。
为什么不能直接用 launch 模式调试 vue-cli-service
因为 vue-cli-service 不是普通 Node 脚本：它被包装成 bin 可执行文件（vue-cli-service.js），且依赖 #!/usr/bin/env node shebang 和 npm 的 bin 解析机制。VSCode 的 type: "node" 调试器无法直接执行这种带 shell wrapper 的入口，会报 Cannot find module '...' or 'Error: spawn node ENOENT'。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
spawn node ENOENT（尤其 Windows 下） - 调试器启动后立即退出，无断点命中
-
program指向node_modules/@vue/cli-service/bin/vue-cli-service.js但跳过所有断点
正确做法：用 --inspect-brk 启动并 attach
核心思路是让 vue-cli-service 自己以调试模式启动，然后 VSCode 去 attach 它——绕过 shebang 和 npm wrapper 的限制。
实操步骤：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在
package.json的scripts中新增一条调试命令："debug:serve": "node --inspect-brk=9229 ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve" - 确保端口
9229未被占用（可改，但要同步更新launch.json） - 创建或修改
.vscode/launch.json，配置attach模式：{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "attach", "name": "Attach to vue-cli-service", "port": 9229, "address": "localhost", "localRoot": "${workspaceFolder}", "remoteRoot": "${workspaceFolder}", "skipFiles": ["<node_internals>/**", "**/node_modules/**"] } ] } - 终端执行
npm run debug:serve（不要在 VSCode 里直接 Run Task） - 等控制台输出类似
Debugger listening on ws://127.0.0.1:9229/...后，在 VSCode 调试面板选择Attach to vue-cli-service并点击 ▶️
此时断点可以打在 vue-cli-service.js 开头，或 lib/commands/serve.js 等内部模块里。
vue.config.js 对 Node 调试没影响，但会影响 sourcemap
注意：vue.config.js 里的 configureWebpack.devtool 只控制生成给浏览器用的 sourcemap，对 Node 进程调试完全无关。你断点打在 vue-cli-service 内部代码上时，看到的是原始 JS（不是 Vue 单文件组件），不需要 sourcemap 支持。
真正影响调试体验的是：
-
node_modules是否被skipFiles过滤掉（否则单步会频繁跳进依赖） -
localRoot和remoteRoot是否一致（尤其在 Docker 或 WSL 场景下容易错位） - 是否用了
yarn pnp或pnpm链接方式——它们可能改变node_modules路径结构，需手动调整remoteRoot
常见误操作：把 vue-cli 本身当项目来调试
有人尝试调试 @vue/cli 包源码（比如 create.js），这时必须确保：
- 你是在
@vue/cli源码目录下打开 VSCode，而不是在你的 Vue 项目里 -
program指向的是本地packages/@vue/cli/bin/vue.js，不是全局安装路径 - 运行前执行过
yarn link或npm link，否则vue create命令仍调用全局版本
否则断点永远不触发——你以为在调试源码，其实执行的是 npm 全局二进制。
调试 vue-cli-service 是少数需要精确区分“谁在执行”“在哪执行”“从哪加载”的场景。路径错一丁点，断点就失效，没有提示，只沉默跳过。
