VSCode调试Vue-CLI单体仓库应用无法设置断点求助

我有一个结构如下的Lerna单体仓库：

- myapp
   - packages
     - web
     - components
     - libraries

应用的Web根目录为myapp/packages/web，在该路径下执行yarn serve可正常启动Vue应用，但在VSCode中调试时无法设置断点。

我的launch.json配置如下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "webapp",
            "url": "http://localhost:8081",
            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                    "webpack:///./*": "${webRoot}/*"
            },
            "skipFiles": [
                    "${workspaceFolder}/node_modules/**/*"
            ]
        }
    ]
}

当我在myapp/packages/web/src/components/MyComponent.vue中设置断点时，VSCode提示：

Some of your breakpoints could not be set

该项目是Lerna单体仓库，同时会引入packages/components和packages/library中的代码。

1. webRoot配置错误：当前webRoot设为仓库根目录${workspaceFolder}（即myapp），但Vue应用的实际运行根目录是myapp/packages/web。webpack生成source map时，路径是基于web包的根目录计算的，导致VSCode无法正确映射到本地文件。
2. sourceMapPathOverrides规则不完整：
   • 对于web包内的代码，source map中的路径格式是webpack:///./src/xxx，当前规则映射到${webRoot}/*（即myapp/*），但实际文件路径是myapp/packages/web/src/xxx，路径不匹配。
   • 对于components和libraries包的代码，source map中的路径可能是webpack:///../components/xxx或webpack:///packages/components/xxx，当前规则没有覆盖这类路径，导致跨包代码的断点也无法识别。

1. 修正launch.json配置 #

调整webRoot和sourceMapPathOverrides，让路径映射完全匹配本地文件结构：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "webapp",
            "url": "http://localhost:8081",
            // 改为Vue应用的实际根目录
            "webRoot": "${workspaceFolder}/packages/web",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                // 匹配web包内的代码
                "webpack:///./src/*": "${webRoot}/src/*",
                // 匹配components包的代码
                "webpack:///../components/*": "${workspaceFolder}/packages/components/*",
                // 匹配libraries包的代码
                "webpack:///../libraries/*": "${workspaceFolder}/packages/libraries/*",
                // 兼容webpack可能生成的其他路径格式
                "webpack:///packages/*": "${workspaceFolder}/packages/*"
            },
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*"
            ]
        }
    ]
}

2. 确保Vue项目的source map配置正确 #

在myapp/packages/web/vue.config.js中，确认开发环境下的devtool配置正确：

module.exports = {
  configureWebpack: {
    devtool: 'eval-source-map' // 开发环境推荐，能生成准确的source map
  }
}

3. 重启调试服务 #

修改配置后，先停止当前的yarn serve服务，重新启动，再启动VSCode调试，断点应该能正常命中。

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