vue cli 3.0下配置开发环境下的sourcemap问题
更新时间：2024年06月06日 09:56:03 作者：chgiser
这篇文章主要介绍了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，结果还是如上所述，
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就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue项目配置国际化 $t('')的介绍和用法的相关资料,多语言和国际化现在已经成为一个网站或应用的必要功能之一,Vue作为一款流行的前端框架,在这方面也有着灵活的解决方案,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了vue实现简易的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要为大家详细介绍了vue实现导航栏效果，选中状态刷新不消失，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要介绍了Vant如何自定义组件适配iphone底部安全区问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue项目运行npm install报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-08-08
这篇文章主要介绍了vue组件传值的实现方式,结合实例形式总结分析了vue.js组建传值的三种实现方式,包括父传子、子传父及非父子传值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了Vue单文件组件开发实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
element-ui是一个比较完善的UI库,但是使用它需要有一点vue的基础，下面这篇文章主要给大家介绍了关于在vue 2.0项目中如何引入element-ui的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
很多时候我们在操作过页面时候，特别是增删改操作之后，数据会有所改变，本文主要介绍了Vue实现父子组件页面刷新的几种常用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue实现锚点跳转之scrollIntoView()方法详解
这篇文章主要介绍了vue实现锚点跳转之scrollIntoView()方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论