Vue生产环境如何自动屏蔽console

徐济照

Vue生产环境自动屏蔽console


背景

在开发中打的log可能会忘记删除导致发上生产版本后有log打出
为了保证生产环境不受这种影响
所以在生产环境时自动屏蔽console;

原理

在项目初始化的时候判断环境,如果是生产环境则把console的指向替换;

实现

在main.js里插入以下代码

1. // 屏蔽console
   
2. (function shieldConsole() {
   
3.     if (process.env.NODE_ENV == "production") {
   
4.         Reflect.ownKeys(console).map(key => {
   
5.             if (typeof console[key] == "function") {
   
6.                 console[key] = () => {};
   
7.             }
   
8.         });
   
9.     }
   
10.     return;
    
11. })();

复制代码

• console是symbol类型所以需要用Object.getOwnPropertySymbols()、Reflect.ownKeys() 遍历
  
• 注意使用Reflect.ownKeys()遍历后会带一个symbol内置对象
  
• 把console的所有方法都改空函数就不会返回了
  

Vue打包后取消console

1. module.exports = {
   
2. chainWebpack(config) {
   
3.     //delete console
   
4.     config.optimization.minimizer('terser').tap((args) => {
   
5.       args[0].terserOptions.compress.drop_console = true
   
6.       return args
   
7.     })
   
8.   }
   
9.   }

复制代码

vue.config.js中增加这段代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322338zta.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！