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文件夾下查看並調試源代碼內容。