Visual studio 如何在Visual Studio 2019中覆盖Vue.js客户端脚本的源映射，以便调试器在断点处停止？

我正在学习

Vue

。最近我发现

visualstudio

中有一个bug，它有效地阻止了调试器在客户端脚本（）的断点处停止

我发现，正如我在这里所写的：，按照中的方法，通过覆盖

源映射

路径，可以在

visualstudio代码

中克服这个问题

让我们考虑下面的项目结构：

要正确解析

源映射以进行调试，我需要
Visual Studio code
中的以下
launch.json
文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Node",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\source\\server\\server.js",
            "preLaunchTask": "build"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/source/client/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${workspaceFolder}/node_modules/*"
            }
        }
    ],
    "compounds": [
        {
            "name": "Vue",
            "configurations": [
                "Node",
                "vuejs: chrome"
            ]
        }
    ]
}

其中，构建任务本身在
package.json
中定义，并由以下命令组成：

"build": "cd source/client && vue-cli-service build"

在Visual Studio中，我可以通过设置适当的属性来镜像它：



但是，我还需要以某种方式覆盖
源映射
路径，问题是如何镜像
Visual Studio 2019
中的
源映射路径
Visual Studio代码
选项

"webRoot": "${workspaceFolder}/source/client/src",
"sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${workspaceFolder}/node_modules/*"

"webRoot": "${workspaceFolder}/source/client/src",
"sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${workspaceFolder}/node_modules/*"