Debugger settings for Chrome in VS Code with Vue.js - vue.js

Question

With the following settings in .vscode\launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
I can set a breakpoint in index.js file in my project and it triggers successfully, but the breakpoints in *.vue files triggers incorrectly.
With the following settings:
{
"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}/*"
}
}
]
}
vice versa, the breakpoints in *.vue files are triggered successfully, but I cannot set a breakpoint in my index.js file.
How to make the breakpoints work in both *.js and *.vue?
See more detailed information on how I set up the environment.

Answer 1

I was very surprised, but adding two versions of the source map override worked for me. I can now set and have it stop on breakpoints in .vue files, .js files, and my imported es6 modules. It only took me about a month to find a solution!
Hope it works for you (this doesn't work for me anymore. See below)
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*"
}
Updated October 2019:
Debugging both js and vue files had broken for me in a recent update. I have finally found new settings that work for both:
"sourceMapPathOverrides": {
"webpack:///src/*.vue": "${webRoot}/*.vue",
"webpack:///./src/*.js": "${webRoot}/*.js"
}

Answer 2

And here is what is working for me in September of 2020 in vsCode 1.49.1: very similar to Steve's answer above:
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*",
"webpack:///./src/*.js": "${webRoot}/src/*.js",
}