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

rvn*_*ord 6 visual-studio source-maps vue.js

我在学习Vue。最近我发现有一个错误,Visual Studio可以有效阻止调试器在客户端脚本的断点处停止(https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot -debug-javascript-code.html)。

我发现,正如我在这里写的:在 Visual Studio 2017 中调试 Vue.js 应用程序,按照https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli中的配方,可以克服这个问题是Visual Studio Code通过覆盖Source Map路径来解决的。

让我们考虑以下项目结构:

在此输入图像描述

为了正确解决Source Maps调试问题,我需要以下launch.json文件Visual Studio Code

{
    "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"
            ]
        }
    ]
}
Run Code Online (Sandbox Code Playgroud)

具有以下内容tasks.json

{
    "version": "2.0.0",
    "tasks": [{
        "label": "build",
        "command": "npm",
        "args": ["run", "build"],
        "type": "shell"
    }]
}
Run Code Online (Sandbox Code Playgroud)

构建任务本身在其中定义package.json并包含以下命令:

"build": "cd source/client && vue-cli-service build"
Run Code Online (Sandbox Code Playgroud)

Visual Studio可以通过设置适当的属性来镜像它:

在此输入图像描述

在此输入图像描述

但是我还需要以Source Map某种方式覆盖路径,问题是如何镜像sourceMapPathOverrides Visual Studio Code中的选项Visual Studio 2019

"webRoot": "${workspaceFolder}/source/client/src",
"sourceMapPathOverrides": {
    "webpack:///./src/*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${workspaceFolder}/node_modules/*"
Run Code Online (Sandbox Code Playgroud)