一、vue-ts版生产环境屏蔽日志

1. 场景

我们都知道，随着开发的调试，我们需要在前端业务逻辑的代码中打印各种接口返回或者逻辑处理的过程日志。通过这些日志来帮助我们验证业务功能是否正常实现，是否存在bug，即使出现问题，也能快速定位问题，解决问题。但是在生产环境中，项目属于发布外网，如果再开放这些日志，很明显不合适。别有用心的人，看到你这些打印的数据，进行破坏性操作，造成系统运行崩溃都是有可能的，那就需要我们在生产上就行日志屏蔽，在开发环境，进行日志的打开。

2. 解决方案

• 方案一：全局变量控制或者直接通过环境变量来控制

  • 全局定义一个Flag，作为是否打开日志的标识。
  • 通过环境的变量来控制这个标识是否打开。

• 方案二：通过babel-plugin-transform-remove-console来控制

  • 安装插件

    $ npm i babel-plugin-transform-remove-console --save-dev

  • 配置babel.config.js

    const pluginsTemp = [
      [
        'component',
        {
          libraryName: 'element-ui',
          styleLibraryName: 'theme-chalk',
        },
      ],
    ];
    // 如果是生产环境将日志插件加入
    if (process.env.NODE_ENV === 'prod') {
      pluginsTemp.push('transform-remove-console');
    }
    
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset',
      ],
      plugins: pluginsTemp,
    };

  • build之后，生产测试，发现果然不存在测试环境中的打印日志