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

goblin_pitcher

遇到的问题

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png

阅读 16.7k

道阻且长

493 声望
4 粉丝
0 条评论

道阻且长

493 声望
4 粉丝
文章目录
宣传栏