vue开发调试时，如何分离出源代码(devtool配置)

        vue不同版本/cli不同版本，在调试，源代码断点时，分离出源代码方便查看，配置大致一致，这里记录一下。

//vue.config.js 文件
module.exports = {
/*一般在configureWebpack配置，不要在chainWebpack里头配置，这个配置好些与cli有关，可能无效*/
    configureWebpack:{
        devtool: "cheap-module-eval-source-map",
        output: {
            /*通过devtoolModuleFilenameTemplate，分离出要调试的源代码,方便查看和调试*/
            devtoolModuleFilenameTemplate: (info) => {
             /**info是一个对象，如
             {
                identifier: './src/views/Home.vue',
                shortIdentifier: './src/views/Home.vue',
                resource: './src/views/Home.vue',
                resourcePath: './src/views/Home.vue',
                absoluteResourcePath: 'E:\\third\\mydot\\src\\views\\Home.vue',
                allLoaders: '',
                query: '',
                moduleId: '',
                hash: 'bb51',
                namespace: ''
             }*/

             const resPath = info.resourcePath
             const identifierPath = info.identifier
            /*
                这里要根据实际要调试的文件来修改，一般都是调试vue源码文件；
                identifierPath有可能不同，要根据实际来调整，我这里可以使用的
            */
             if (/\.vue$/.test(resPath) && identifierPath.startsWith("./src") >= 0) {
                 return `webpack:///${resPath.replace('./src', 'my-code/src')}`
             }
             return `webpack:///${resPath}?${info.hash}`
           }
        }
    }
}

我这里分离后，在浏览器中如下图所示