I've been struggling for hours trying to understand why I'm unable to view the full source of my .vue files in the Chrome debugger. When I click on webpack://, I can see the files listed there like they are in my project tree, but when I try to open them, the actual source code doesn't display.
At the end of each file, there is a common line that reads
component.options.__file = "src/foldername/foldername/foo.vue"I have made numerous changes to my vue.config.js file, with the most important line being:
config.devtool = 'cheap-module-source-map'Additionally, at the bottom of my Chrome dev-tools window, it shows
'source mapped from app.1df89b9.js'Below is the complete block of my vue.config.js:
const CopyModulesPlugin = require('copy-modules-webpack-plugin')
module.exports = {
publicPath: process.env.BASE_URL,
configureWebpack:
config => {
config.devtool = 'cheap-module-source-map';
config.plugins = [
new CopyModulesPlugin({
destination: 'webpack-modules'
}),
...config.plugins
];
config.module.rules = [
{
test: /\shared\.worker\.ts$/,
loader: 'worker-loader',
options: {
worker: {
type: 'SharedWorker',
options: {
type: 'classic',
credentials: 'include',
name: 'birdman-shared-worker'
}
}
}
}, {
test: /(?<!\.shared)\.worker\.ts$/,
loader: 'worker-loader',
options: {
worker: {
type: 'Worker'
options: {
type: 'classic',
credentials: 'include',
name: 'birdman-worker'
}
}
}
},
...config.module.rules];
}