vue cli 3.0下配置开发环境下的sourcemap问题

娜娜萝

vue cli 3.0下配置开发环境下的sourcemap


问题描述

vue cli 3.0环境下开发调试过程中发现部分vue的源码找不到，调试窗口中同名字的vue文件最多只能出现一个，而且文件的位置也不对应相应的文件夹，直接在webpack://根目录下罗列出来

问题分析

因为是用的vue cli 3.0版本，与2.x的配置文件改变了很多，所以老版本的配置不能复制过来使用。
网上查找了很多资料，都是提的配置productionSourceMap为true，如下，然而我的工程里一开始就已经将该项配置为true，结果还是如上所述，

1. module.exports = {
   
2. productionSourceMap: true,
   
3. }

复制代码

也在官网上看了vue cli 3.0版本详细配置说明，也是描述productionSourceMap为开发环境源码配置项，然结果显然说明不是的
于是各种查找，各种尝试，各种研究，最终总算是成功了，配置如下：

1. const debug = process.env.NODE_ENV !== 'production'
   
2. module.exports = {
   
3. ……//自己的其他配置
   
4.     configureWebpack: config => {
   
5.     if (debug) { // 开发环境配置
   
6.         config.devtool = 'source-map'
   
7.     }
   
8. },
   
9. ……//自己的其他配置
   
10. }

复制代码

配置成功后，调试窗口中源码位置的webpack://根目录下会多出一个src文件夹，里面就有所有的源码了

vue如何关闭sourceMap

vue打包后出现一些map文件的解决办法：

问题

可能很多人在做vue项目打包，打包之后js中，会自动生成一些map文件，那我们怎么把它去掉不要呢？
1，运行  cnpm run build  开始打包
2，会在项目目录下自动创建dist目录，打包好的文件都在其中

解决办法

去src/config/index.js中改一个参数：

1. productionSourceMap:false

复制代码

把这个改为false。
不然在最终打包的文件中会出现一些map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322301t5v.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！