Отладка vue -cli проекта - без точек останова, консольных ссылок на неправильные файлы

Question

Попытка настроить vscode для отладки vue проекта.

Я использую vue ui, потому что это на самом деле очень удобно.

У меня 2 проблемы:

1. Точки останова заканчиваются Breakpoint set but not yet bound. И, очевидно, не работает.
2. Ссылки на файлы в консоли отладки открыты для src\node_modules\cache-loader\dist\webpack:.... Это даже не правильный путь - в sr c нет node_modules.

Я прочитал эту страницу:
https://vuejs.org/v2/cookbook/debugging-in-vscode.html

Я получил большую часть конфигурации запуска оттуда.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "vuejs/chrome: Attach to devtools",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "urlFilter": "http://localhost:8080/*",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

Answer 1

Сегодня нашли ответ, немного поэкспериментировав.

Если вы используете Vue CLI 3, установите или обновите свойство devtool внутри vue.config.js:

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

Я получил подсказку к решению со страницы, на которой был задан вопрос: хотя webpack неявно генерирует какую-то исходную карту, поваренная книга явно упоминает, что веб-пакет должен быть настроен для создания исходных карт. Иначе, похоже, он не делает это правильно каким-либо образом, необходимым для правильной работы.

Оставлю это для потомков на случай, если кто-нибудь еще наткнется на эту странность (имеет исходные карты, но не правильные) .