Vue build 过程取消 console、debugger 控制台信息输出

一、前言

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

组包前，逐一去删除、注释显然费时费力，好在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.js的build.env配置中引入。

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

三、拓展阅读

• 《Vue2合集》

一、前言

如果通过document.getElementById("") document.getElementByName("") 等方式获得的对象不存在情况下，进行操作时会报错。因此需要首先判断该对象是否存在，以下两种判断方法，推荐使用第一种。

二、方法一: v==null

var v;
v = document.getElementByIdx_x( "id ");
if(v==null){
//不存在，错误处理
}else{
//存在，正常处理
}

三、方法二: typeof(obj) == “undefined”

if (typeof(obj) == "undefined") {
    //不存在，错误处理
}else{
//存在，正常处理
}

四、拓展阅读

• 《Vue系列》