vuecli3开发环境下sourcemap在浏览器上查看源代码的问题

遇到的问题

老项目重构，vue 脚手架更新至 vue-cli3, 经过一番配置后，发现跟之前的 vue-cli2 相比，调试的时候找到源代码的文件变得困难许多，如查看 login.vue 页面，出现一堆搜索结果：

其中的 login.vue 也并非源码：

起初以为是 sourcemap 的配置问题，翻了半天文档，devtool 的各种配置全试了一遍，似乎都没有什么用处。打开 webpack:// 文件夹，发现源代码似乎混在 sourcemap 文件中：

既然 sourcemap 的文件中有源代码，那就说明不是 sourcemap 的问题，问题出在生成 sourcemap 后，没有将源代码和其他 sourcemap 分离出去，于是查看 output 相关配置，发现配置项 output.devtoolModuleFilenameTemplate。

output.devtoolModuleFilenameTemplate

output.devtoolXXXX 之类的配置都是用来处理 sourcemap 文件的配置，output.devtoolModuleFilenameTemplate 用于处理输出的 sourcemap 文件的文件名及路径。
output.devtoolModuleFilenameTemplate 对于输出的 sourcemap 文件，相当于 output.filename 对于本地代码打包后的文件。

vue.config.js 中的配置

我们需要将 sourcemap 文件中源代码的 script 内容单独打包出来，区别于非源代码部分，源代码部分文件命名不包含 hash 字符，代码如下：

const production = process.env.NODE_ENV === 'production'
......
module.exports = {
    configureWebpack: config => {if (!production) {
        config.output.devtoolModuleFilenameTemplate = info => {
            const resPath = info.resourcePath
            if ((/\.vue$/.test(resPath) && !/type=script/.test(info.identifier)) || /node_modules/.test(resPath)) 
            {return `webpack:///${resPath}?${info.hash}`
            }
            return `webpack:///${resPath.replace('./src', 'my-code/src')}`
        }
    }
}

修改后的效果

修改后，打开 F12，可在 webpack://my-code 文件夹下查看并调试源代码内容。