Как переопределить исходные карты для Vue. js клиентских сценариев в Visual Studio 2019, чтобы отладчик останавливался на точках останова? - PullRequest
1 голос
/ 11 января 2020

Я учусь Vue. Недавно я обнаружил, что в Visual Studio есть ошибка, которая эффективно предотвращает остановку отладчика в точках останова клиентских скриптов (https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot-debug-javascript-code.html).

Я понял, что, как я писал здесь: Отладка Vue. js приложения в Visual Studio 2017 , следуя рецепту из https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli, можно преодолеть эту проблему в Visual Studio Code путем переопределения Source Map путей.

Рассмотрим следующую структуру проекта:

enter image description here

Чтобы правильно разрешить 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"
            ]
        }
    ]
}

со следующим tasks.json:

{
    "version": "2.0.0",
    "tasks": [{
        "label": "build",
        "command": "npm",
        "args": ["run", "build"],
        "type": "shell"
    }]
}

Где сама задача сборки определена в package.json и состоит из следующих команд:

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

В Visual Studio Я могу отразить его, задав соответствующие свойства:

enter image description here

enter image description here

Однако мне также нужно как-то переопределить пути 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/*"
...