Sourcemaps in .vue files are broken
I am currently unable to set breakpoints and debug .vue files within VS Code's native debugger.
It appears that somewhere along the line, either babel, webpack, or vue-loader will accidentally discard the relative path context for the module, turning something like webpack:///monitoring/components/alert_widget.vue into webpack:///alert_widget.vue. This makes it virtually impossible to map paths to source directories, and can cause conflicts if two .vue templates use the same filename.
After some digging, I've turned up several issues that appear to corroborate this problem:
https://github.com/vuejs/vue/issues/6316
https://github.com/vuejs/vue-loader/issues/620
https://github.com/vuejs/vue-loader/issues/1163
https://github.com/JeffreyWay/laravel-mix/issues/1102
https://github.com/Microsoft/vscode-chrome-debug/issues/430
https://github.com/Microsoft/vscode-chrome-debug/issues/597
As a side note, this seems to be slightly different depending on which devtool option is selected
https://webpack.js.org/configuration/devtool/
As a quick fix, we may be able to use webpack's output.devtoolModuleFilenameTemplate option or the SourceMapDevToolPlugin to catch and rewrite these faulty sourcemap paths.
An example config can be found here:
https://github.com/vuejs/vue-loader/issues/146#issuecomment-175719178
Long term, we could try to isolate the underlying issues and produce upstream fixes for webpack, and vue-loader (related issue).