Vue生产环境如何自动屏蔽console
更新时间：2024年06月06日 15:09:56 作者：北长风
这篇文章主要介绍了Vue生产环境如何自动屏蔽console问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue生产环境自动屏蔽console
背景
在开发中打的log可能会忘记删除导致发上生产版本后有log打出
为了保证生产环境不受这种影响
所以在生产环境时自动屏蔽console;
原理
在项目初始化的时候判断环境,如果是生产环境则把console的指向替换;
实现
在main.js里插入以下代码
// 屏蔽console
(function shieldConsole() {
if (process.env.NODE_ENV == "production") {
Reflect.ownKeys(console).map(key => {
if (typeof console[key] == "function") {
console[key] = () => {};
}
});
}
return;
})();- console是symbol类型所以需要用Object.getOwnPropertySymbols()、Reflect.ownKeys() 遍历
- 注意使用Reflect.ownKeys()遍历后会带一个symbol内置对象
- 把console的所有方法都改空函数就不会返回了
Vue打包后取消console
module.exports = {
chainWebpack(config) {
//delete console
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
}vue.config.js中增加这段代码
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3 中使用 jsx 开发,本文着重说一下在使用 .vue 文件和 .jsx 文件在使用语法上的差异，需要的朋友可以参考下2022-09-09
vue中input type=file上传后@change事件无效的解决方案
这篇文章主要介绍了vue中input type=file上传后@change事件无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue 中的数据绑定和模板渲染都是异步的，那么如何在更新完成后执行回调函数呢？这就需要用到 Vue 的 nextTick 方法了，本文详细介绍了Vue2和Vue3的nextTick实现原理，感兴趣的同学可以参考一下2023-04-04
Vue.config.productionTip = false 不起作用的问题及解决
本文主要介绍了Vue.config.productionTip = false 不起作用的问题及解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-08-08
文章介绍了前端通过将后端返回的文件流转化为blob对象,并使用FileReader实现文件下载的完整方式,文章详细描述了前端Vue代码和后端Spring Boot代码,指出了后端使用不同变量下载文件时文件格式和名称的问题2025-12-12
这篇文章主要介绍了vue项目部署到Apache中遇到的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
Emit是Vue3中另一种常见的组件间传值方式,它通过在子组件中触发事件并将数据通过事件参数传递给父组件来实现数据传递,本文就来介绍一下Vue3 emit传值,感兴趣的可以了解一下2023-12-12
Teleport是一种能够将我们的模板移动到DOM中Vue app之外的其他位置的技术,下面这篇文章主要给大家介绍了关于Vue3中内置组件Teleport的基本使用与典型案例的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue组件间数据传递的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
这篇文章主要介绍了解决vue-cli+iview项目打包上线之后图标不显示问题,本文通过两种方法给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
最新评论