如何在VSCode中调试Lerna项目内基于Vite的Vue3项目

1. 前置确认 #

• 先确认你的Vue3项目在Lerna仓库中的相对路径，示例路径为packages/frontend-vue3，后续配置替换为你自己的实际路径即可
• 确保VSCode已安装Debugger for Chrome或Debugger for Edge扩展

2. 调整Vue3项目的Vite配置 #

在子包内的vite.config.js（或vite.config.ts）中新增如下配置：

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 其他原有配置保留
  server: {
    port: 5173, // 和你项目实际启动端口保持一致即可
  },
  build: {
    sourcemap: true, // 开启源码映射是调试的核心前提
  },
  resolve: {
    alias: {
      // 配置别名的绝对路径，避免多包场景下路径映射错乱
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

3. 配置VSCode调试规则 #

在Lerna仓库根目录新建.vscode/launch.json文件，写入如下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome", // 用Edge调试的话替换为msedge
      "request": "launch",
      "name": "调试Lerna内Vue3项目",
      "url": "http://localhost:5173", // 和Vite配置的端口完全一致
      // 替换为你的Vue3子包在仓库内的相对路径
      "webRoot": "${workspaceFolder}/packages/frontend-vue3",
      "sourceMapPathOverrides": {
        // 核心映射规则，匹配Vite生成的源码路径和本地实际路径
        "vite:///src/*": "${webRoot}/src/*",
        "webpack:///./src/*": "${webRoot}/src/*",
        "/@/*": "${webRoot}/src/*",
        "/*": "*"
      }
    }
  ]
}

如果有多个Vue3子包需要调试，在configurations数组中新增多组配置，分别对应不同子包的路径和启动端口即可。

4. 调试操作步骤 #

• 先启动Vue3项目的dev服务，可在仓库根目录执行lerna run dev --scope 你的Vue3子包包名
• Vite服务启动完成后，在VSCode左侧调试面板选择刚才配置的调试规则，点击启动按钮
• 直接在Vue3子包的.vue、.js、.ts文件中打断点即可正常命中

常见问题排查 #

• 断点不生效时可先清理浏览器缓存，重启Vite服务后再重试
• 确认launch.json中的端口、子包路径和实际情况完全匹配
• 关闭Vite的缓存功能（启动时加--force参数）后再尝试调试

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