线上环境禁止打印console.log

当我们在开发项目时，我们会使用大量的console.log，这样方便我们去调试，但是当正常上线后，在生产环境，我们是不喜欢打印的信息暴露在浏览器控制台的。

上线禁掉console方法

方法1 创建函数

utils中创建方法

export function rewirteLog() {
  if (!['development', 'mock'].includes(process.env.NODE_ENV)) {
    ['log', 'warn', 'error', 'info'].forEach((item) => {
      // eslint-disable-next-line func-names
      console[item] = (function (func) {
        const res = localStorage.getItem('debug');
        if (res === 'GMV_desk') {
          return func;
        }
        // eslint-disable-next-line func-names
        return function () {};
      })(console[item]);
    });
  }
}

其中process.env.NODE.ENV 取得变量具体看我们生产该变量赋了啥值，这里我生产环境该变量赋值production，所以在该条件下执行这个函数就不会在控制台看到打印日志了

main.ts中引入方法并调用

import { rewirteLog } from '@/utils/consoleMethod';

rewirteLog();

方法2 安装插件

安装插件

npm install babel-plugin-transform-remove-console --save-dev

在’babel.config.js’ 文件中修改

const prodPlugin = []

if (process.env.NODE_ENV === 'production') {
  prodPlugin.push("transform-remove-console")
}


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
  , plugins: [
    ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],
    ...prodPlugin
  ]
}