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

一、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之后,生产测试,发现果然不存在测试环境中的打印日志

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值