如何在VS Code中调试Vite项目的vite.config.ts文件

问题核心：vite.config.ts是Node.js环境执行的构建配置文件，你当前仅配置了Chrome浏览器调试（针对前端代码），因此无法命中Node端代码的断点。需添加Node.js调试配置并调整相关TS配置。

步骤1：修改launch.json，新增Node调试配置 #

在原有Chrome配置基础上，添加专门用于调试Vite启动过程的Node配置：

{
  "version": "0.2.0",
  "configurations": [
    // 保留原有的Chrome前端调试配置
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    },
    // 新增Node调试配置，用于调试vite.config.ts
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Vite Config",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"],
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ]
    }
  ]
}

• 用npm run dev的方式启动Vite，兼容npm/yarn/pnpm等包管理器
• resolveSourceMapLocations确保VS Code能找到项目内的源文件映射

步骤2：检查并修正tsconfig.node.json #

确保该配置文件包含vite.config.ts且开启sourceMap：

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true, // 必须开启，否则无法映射TS源文件
    "strict": true
  },
  "include": ["vite.config.ts"] // 确保配置文件被TS编译处理
}

步骤3：启动调试 #

1. 在vite.config.ts的plugins: [vue()]处添加断点
2. 打开VS Code调试面板，选择新增的Debug Vite Config配置
3. 点击启动调试，此时Node调试器会触发Vite启动流程，断点即可命中

关键说明 #

• Chrome调试仅负责浏览器端的前端代码（src目录内），vite.config.ts属于Node端构建代码，必须用Node调试器
• 若断点仍未命中，可尝试删除node_modules和.vite缓存目录后重新安装依赖

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