我要评论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中增加这段代码
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论