Debug Vue.js App with VS Code. Error Unverified Breakpoint

config vue.config.js(If it doesn't exist, create one)

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

config babel.config.js

module.exports = {  "env":{    "development":{      "sourceMaps":true,      "retainLines":true,     }  },  presets: [    '@vue/app'  ]}

config launch.json

{    "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}/*",                "webpack:///./src/*": "${webRoot}/*"            }        },    ]}

I can debug .vue and .js file normally after referring to the above configuration.(vue-cli3 + vscode)

This debug adapter doesn't use the same syntax as the Chrome debug adapter: remove the * at the end of url and path:

"webpack:///src/": "${webRoot}/"

For me my webroot folder was not set correctly.

My vue files browser is set to:

D:\Workspace

The project is in that folder as

D:\Workspace\vue_project1

The webroot setting in the launch.json had to change to:

"webRoot": "${workspaceFolder}/vue_project1"