博客
关于我
vue-ts版生产环境屏蔽日志
阅读量:611 次
发布时间:2019-03-13

本文共 1199 字,大约阅读时间需要 3 分钟。

Vue-TS版生产环境屏蔽日志

1. 场景

在前端业务逻辑开发过程中,我们经常会通过打印日志来验证接口返回和逻辑处理过程中的数据。这些日志在开发环境中无疑是非常有用的工具,有助于快速定位问题。但在生产环境中,开放这些调试日志会带来潜在的安全隐患。对于发布在外网的项目,一些用心的用户可能会发现这些打印信息并作不当操作,导致系统崩溃。因此,在生产环境中屏蔽日志成为了必不可少的 cruelty。


2. 解决方案

针对上述场景,我们可以采取两种方法来实现日志屏蔽。

方法一:全局变量控制或环境变量控制

这种方法通过创建一个全局标志位或使用环境变量来控制日志是否输出。具体实现方式有以下两种:

  • 全局变量控制

  • 在整个项目中定义一个标志位,如 debugMode,默认设置为 false
  • 在需要显示日志的地方,使用 debugMode 来控制日志输出。
  • 在开发环境下,将 debugMode 设为 true,这样开发者可以根据需要查看日志。
  • 生产环境下,默认为 false,日志将被屏蔽。
  • 环境变量控制

  • package.json 中添加环境变量 DEBUG
  • 根据 DEBUG 的值来决定是否启用日志输出,例如:
    const isDebugMode = process.env.DEBUG === 'true';
  • 在开发环境中,通过命令行参数传递 DEBUG=true,启动服务器。

这种方法的优点是实现简单易懂,适合对配置不太熟悉的开发者。


方法二:使用 Babel 插件屏蔽日志

这种方法可以更方便地控制生产环境下的日志输出,具体步骤如下:

  • 安装插件
    npm install -D babel-plugin-transform-remove-console
  • 配置 Babel
    • babel.config.js 中添加插件配置:
      const pluginsTemp = [];if (process.env.NODE_ENV === 'prod') {  pluginsTemp.push('transform-remove-console');}module.exports = {  presets: [    '@vue/cli-plugin-babel/preset',  ],  plugins: pluginsTemp,};
    • 注意:确保插件的加载顺序正确,并且仅在生产环境下加载该插件。
  • 编译测试
    • 重新编译项目,运行命令:
      npm run build
    • 生成的代码将不再包含生产环境下的日志打印语句。
  • 这种方法的优势在于可以灵活控制日志输出,并且只会依赖于项目的 ** Babel** 配置。


    总结

    通过以上方法,我们可以在 Vue-TS 项目中实现日志屏蔽的目标。选择哪种方案取决于你的项目需求和对 ** Babel** 插件的熟悉程度。希望这段内容能为你的开发工作提供帮助!

    转载地址:http://rhbaz.baihongyu.com/

    你可能感兴趣的文章
    Mysql学习总结(71)——数据库介绍(MySQL安装 体系结构、基本管理)再回顾
    查看>>
    Mysql学习总结(72)——MySQL 开发者开发,设计规范再总结
    查看>>
    Mysql学习总结(73)——MySQL 查询A表存在B表不存在的数据SQL总结
    查看>>
    Mysql学习总结(74)——慢SQL!压垮团队的最后一根稻草!
    查看>>
    Mysql学习总结(75)——并发量大、数据量大的互联网业务数据库设计军规
    查看>>
    Mysql学习总结(76)——MySQL执行计划(explain)结果含义总结
    查看>>
    Mysql学习总结(77)——温故Mysql数据库开发核心原则与规范
    查看>>
    Mysql学习总结(78)——MySQL各版本差异整理
    查看>>
    Mysql学习总结(79)——MySQL常用函数总结
    查看>>
    Mysql学习总结(7)——MySql索引原理与使用大全
    查看>>
    Mysql学习总结(80)——统计数据库的总记录数和库中各个表的数据量
    查看>>
    Mysql学习总结(81)——为什么MySQL不推荐使用uuid或者雪花id作为主键?
    查看>>
    Mysql学习总结(82)——MySQL逻辑删除与数据库唯一性约束如何解决?
    查看>>
    Mysql学习总结(83)——常用的几种分布式锁:ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
    查看>>
    Mysql学习总结(84)—— Mysql的主从复制延迟问题总结
    查看>>
    Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
    查看>>
    Mysql学习总结(8)——MySql基本查询、连接查询、子查询、正则表达查询讲解
    查看>>
    Mysql学习总结(9)——MySql视图原理讲解与使用大全
    查看>>
    Mysql学习笔记 - 在Centos7环境下离线安装Mysql
    查看>>
    MySQL学习笔记十七:复制特性
    查看>>