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文件夹下查看并调试源代码内容。