Vue build过程取消console debugger控制台信息输出方法详解
更新时间：2023年09月28日 10:56:27 作者：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过程取消的资料请关注脚本之家其它相关文章！
相关文章
Jenkins Sidebar Link插件实现添加侧边栏功能详解
这篇文章主要介绍了vue框架实现添加侧边栏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue组件封装方案实现，我们将从分析组件封装的优势开始，然后依次介绍 vue.js 的基本概念，以及如何创建、封装和使用自定义组件2023-03-03
最近项目更新频繁,每次一更新客户都说还跟之前的一样,一查原因是因为客户没有清空浏览器的缓存,所以为了方便客户看到最新版本,开始调研再发布新版本后自动清理缓存,这篇文章主要给大家介绍了关于Vue项目每次发版后要清理浏览器缓存问题的解决办法,需要的朋友可以参考下2024-02-02
这篇文章主要为大家介绍了vue3源码分析reactivity实现原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了基于vue的tab-list类目切换商品列表组件的示例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了Vue-Router在Vue2和Vue3中的使用,本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue后台管理添加多语言功能的实现示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
vue中的addEventListener和removeEventListener用法说明
这篇文章主要介绍了vue中的addEventListener和removeEventListener用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
el-table 树形数据 tree-props 多层级使用避坑
本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
解决element-ui的table表格控件表头与内容列不对齐问题
这篇文章主要介绍了解决element-ui的table表格控件表头与内容列不对齐问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论