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

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,};