Точки останова неправильно запускаются в коде Visual Studio с проектом Vue.js

Question

Я пытаюсь настроить VS Code + Vue.js для работы в каком-либо проекте Vue.js.Я уже сделал несколько шагов , но не могу заставить точки останова работать правильно.

, если я запускаю сайт с

npm run dev

, а затем начинаю отладку в VS Code с помощью Отладчик для Chrome и установите точку останова на определенной строке кода в файле .vue, строка обычно помечается красным кружком, но точка останова запускается в другом файле app.js в коде, подобном этому:

// module
exports.push([module.i...
// exports
/***/ }),

что может быть не так с моими настройками отладчика?

моя конфигурация:

{
"version": "0.2.0",
"configurations": [
  {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceRoot}"
  },
  {
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Chrome",
    "port": 9222,
    "webRoot": "${workspaceRoot}"
  }
]
}

devtool: 'source-map',

моя версия vue-cli vue@2.5.17.

Answer 1

Проверьте поваренную книгу Vue.js :

Отображение исходного кода

В файле config / index.js добавьте:

devtool: 'source-map',

и

Запуск приложения

Ваш файл launch.config должен выглядеть следующим образом:

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