Vue build过程取消console debugger控制台信息输出方法详解

 更新时间:2023年09月28日 10:56:27   作者:SHQ5785  
这篇文章主要为大家介绍了Vue build过程取消console debugger控制台信息输出方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一、前言

Vue项目开发过程中,会经常需要使用console.logconsole.infoalert等测试语句来输出内容,而在生产环境之中,我们不希望控制台同样输出以上信息,特别是用户信息相关。

组包前,逐一去删除、注释显然费时费力,好在Vue提供了通过配置文件修改配置变量,实现在开发环境打印,而生产环境不打印控制台信息的方法。

二、配置文件修改

修改build/webpack.prod.conf.js配置文件,找到UglifyJsPlugin配置,在compress中添加如下代码即可。

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      // 打包的时候移除console、debugger
      drop_debugger: true, // 移除debugger
      drop_console: true, // 移除console
      pure_funcs: ['console.log','console.info']
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
}),

更优的配置方式如下:

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      // 打包的时候移除console、debugger
      drop_debugger: process.env.NODE_ENV=== 'production', // 移除debugger
      drop_console: process.env.NODE_ENV=== 'production', // 移除console
      warnings: process.env.NODE_ENV=== 'production', // 移除告警信息
      pure_funcs: ['console.log','console.info']
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
}),

其中,process.env.NODE_ENV定义在prod.env.js文件中,

module.exports = {
	NODE_ENV: "production"
}

prod.env.js文件在config/index.jsbuild.env配置中引入。

build: {
	env: require('./prod.env')
}

Vue2合集

以上就是Vue build过程取消console debugger控制台信息输出方法详解的详细内容,更多关于Vue build过程取消的资料请关注脚本之家其它相关文章!

相关文章

  • Vue.js axios响应拦截如何获取返回状态码

    Vue.js axios响应拦截如何获取返回状态码

    这篇文章主要介绍了Vue.js axios响应拦截如何获取返回状态码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue+Element ui 根据后台返回数据设置动态表头操作

    Vue+Element ui 根据后台返回数据设置动态表头操作

    这篇文章主要介绍了Vue+Element ui 根据后台返回数据设置动态表头操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 详解vue-cli3使用

    详解vue-cli3使用

    这篇文章主要介绍了详解vue/cli 3使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue编译器解析compile源码解析

    Vue编译器解析compile源码解析

    这篇文章主要为大家介绍了Vue编译器解析compile源码解析示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue中如何通过函数传参数

    vue中如何通过函数传参数

    这篇文章主要介绍了vue中如何通过函数传参数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue组件vue-treeselect箭头和叉图标变大问题及解决

    vue组件vue-treeselect箭头和叉图标变大问题及解决

    这篇文章主要介绍了vue组件vue-treeselect箭头和叉图标变大问题及解决方案,具有很好的参考价值,希望对大家有所帮助。
    2022-07-07
  • 一文秒懂vue-property-decorator

    一文秒懂vue-property-decorator

    这篇文章主要介绍了vue-property-decorator的简单知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • mpvue 项目初始化及实现授权登录的实现方法

    mpvue 项目初始化及实现授权登录的实现方法

    这篇文章主要介绍了mpvue 项目初始化及实现授权登录的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue 事件的$event参数=事件的值案例

    Vue 事件的$event参数=事件的值案例

    这篇文章主要介绍了Vue 事件的$event参数=事件的值案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-01-01
  • vue中多路由表头吸顶实现的几种布局方式

    vue中多路由表头吸顶实现的几种布局方式

    这篇文章主要介绍了vue项目多路由表头吸顶实现的几种布局方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04

最新评论