Vue build过程取消console debugger控制台信息输出方法详解
作者：SHQ5785
这篇文章主要为大家介绍了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')
}以上就是Vue build过程取消console debugger控制台信息输出方法详解的详细内容，更多关于Vue build过程取消的资料请关注脚本之家其它相关文章！