vue cli 3.0下配置开发环境下的sourcemap
问题描述
vue cli 3.0环境下开发调试过程中发现部分vue的源码找不到,调试窗口中同名字的vue文件最多只能出现一个,而且文件的位置也不对应相应的文件夹,直接在webpack://根目录下罗列出来
问题分析
因为是用的vue cli 3.0版本,与2.x的配置文件改变了很多,所以老版本的配置不能复制过来使用。
网上查找了很多资料,都是提的配置productionSourceMap为true,如下,然而我的工程里一开始就已经将该项配置为true,结果还是如上所述,
module.exports = { productionSourceMap: true, }
也在官网上看了vue cli 3.0版本详细配置说明,也是描述productionSourceMap为开发环境源码配置项,然结果显然说明不是的
于是各种查找,各种尝试,各种研究,最终总算是成功了,配置如下:
const debug = process.env.NODE_ENV !== 'production' module.exports = { ……//自己的其他配置 configureWebpack: config => { if (debug) { // 开发环境配置 config.devtool = 'source-map' } }, ……//自己的其他配置 }
配置成功后,调试窗口中源码位置的webpack://根目录下会多出一个src文件夹,里面就有所有的源码了
vue如何关闭sourceMap
vue打包后出现一些map文件的解决办法:
问题
可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢?
1,运行 cnpm run build 开始打包
2,会在项目目录下自动创建dist目录,打包好的文件都在其中
解决办法
去src/config/index.js中改一个参数:
productionSourceMap:false
把这个改为false。
不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。