Настройки отладчика для Chrome в VS Code с Vue.js

Question

Со следующими настройками в .vscode \ launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
    ]
}

я могу установить точку останова в файле index.js в моем проекте, и она срабатывает успешно, но точки останова в файлах * .vue запускаютсянеправильно.

При следующих настройках:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

и наоборот, точки останова в файлах * .vue успешно срабатывают, но я не могу установить точку останова в моем файле index.js.

Как заставить точки останова работать как в * .js, так и в * .vue?

См. Более подробную информацию о , как я настраиваю среду .

Answer 1

Я был очень удивлен, но добавление двух версий переопределения исходной карты сработало для меня.Теперь я могу установить и остановить его на точках останова в файлах .vue, .js и моих импортированных модулях es6.Мне понадобилось около месяца, чтобы найти решение!

Надеюсь, у вас это получится.

      "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/*",
          "webpack:///src/*": "${webRoot}/*"
      }