IT俱乐部 JavaScript Vue生产环境如何自动屏蔽console

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中增加这段代码

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/11732.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部