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使用axios的小技巧分享

    vue使用axios的小技巧分享

    这篇文章主要为大家详细介绍了一些vue使用axios的小技巧,文中的示例代码讲解详细,对我们深入掌握vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • Vue的路由配置过程(Vue2和Vue3的路由配置)

    Vue的路由配置过程(Vue2和Vue3的路由配置)

    这篇文章回顾了Vue2和Vue3中路由的配置步骤,包括安装正确的路由版本、创建路由实例、配置routes以及在入口文件中注册路由,Vue2中使用Vue.use(VueRouter),而Vue3中使用createRouter和createWebHashHistory
    2025-01-01
  • 深入解读VUE中的异步渲染的实现

    深入解读VUE中的异步渲染的实现

    这篇文章主要介绍了深入解读VUE中的异步渲染的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue.js每天必学之表单控件绑定

    Vue.js每天必学之表单控件绑定

    Vue.js每天必学之表单控件绑定,如何在表单控件元素上创建双向数据绑定,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vue双向绑定数据限制长度的方法

    vue双向绑定数据限制长度的方法

    这篇文章主要为大家详细介绍了vue双向绑定数据限制长度的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • Vue项目本地没有问题但部署到服务器上提示错误(问题解决方案)

    Vue项目本地没有问题但部署到服务器上提示错误(问题解决方案)

    一个 VUE 的项目在本地部署没有问题,但是部署到服务器上的时候提示访问资源的错误,遇到这样的问题如何解决呢?下面小编给大家带来了Vue项目本地没有问题但部署到服务器上提示错误的解决方法,感兴趣的朋友一起看看吧
    2023-05-05
  • Vue reactive函数实现流程详解

    Vue reactive函数实现流程详解

    一个基本类型的数据,想要变成响应式数据,那么需要通过ref函数包裹,而如果是一个对象的话,那么需要使用reactive函数,这篇文章主要介绍了Vue reactive函数
    2023-01-01
  • uniapp嵌套webview无法返回上一级解决方式

    uniapp嵌套webview无法返回上一级解决方式

    uniapp是一款非常强大的跨平台开发框架,它可以让我们只编写一份代码,就能在多个平台上运行,这篇文章主要给大家介绍了关于uniapp嵌套webview无法返回上一级的解决方式,需要的朋友可以参考下
    2024-05-05
  • vue中axios处理http发送请求的示例(Post和get)

    vue中axios处理http发送请求的示例(Post和get)

    本篇文章主要介绍了vue中axios处理http请求的示例(Post和get),这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue.js中关于点击事件方法的使用(click)

    vue.js中关于点击事件方法的使用(click)

    这篇文章主要介绍了vue.js中关于点击事件方法的使用(click),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论