> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# 移除生产 console.log

## 业务需求：

随着项目开发迭代，代码越来越多，在开发环境时，大多需要**console.log**打印日志做相应的处理，还有就是通过 console.log()日志的状态来定位 bug 的位置。协同开发过程中，每个开发成员都也有可能打印**console.log**，有时候可能忙于疏忽，忘记注释掉打印的日志，也有肯能打印的信息是一些涉及用户个人信息安全的日志信息。当上生产环境时，这些日志信息都不应该出现在控制台。若是一个一个去找，去注释代码，这肯定不现实。

现在可以通过第三方插件来统一处理**console.log**日志的打印，有了第三方插件的加持，就可以不用担心生产环境打印日志的问题了。

## 插件使用：


```sh [npm]
npm install babel-plugin-transform-remove-console -D
```

```sh [yarn]
yarn add babel-plugin-transform-remove-console -D
```

```sh [pnpm]
pnpm add babel-plugin-transform-remove-console -D
```

```sh [bun]
bun add babel-plugin-transform-remove-console -D
```

```sh [deno]
deno add npm:babel-plugin-transform-remove-console -D
```




```sh [npm]
npm install babel-plugin-transform-remove-console -D
```

```sh [yarn]
yarn add babel-plugin-transform-remove-console -D
```

```sh [pnpm]
pnpm add babel-plugin-transform-remove-console -D
```

```sh [bun]
bun add babel-plugin-transform-remove-console -D
```

```sh [deno]
deno add npm:babel-plugin-transform-remove-console -D
```

**注**：可以通过 yarn 或 npm 来安装依赖；-D 等价于 --save-dev，意思是将依赖安装在开发环境中。

```javascript title="插件配置"
const plugins = ["@vue/babel-plugin-transform-vue-jsx"];
// 生产环境移除console
if (process.env.NODE_ENV === "production") {
    plugins.push("transform-remove-console");
}

module.exports = {
    plugins: plugins,
    presets: ["@vue/cli-plugin-babel/preset"],
};
```

```javascript title="插件配置"
module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
    // 生产环境移除console
    env: {
        production: {
            plugins: ["transform-remove-console"],
        },
    },
};
```

```javascript title="插件配置"
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);

const plugins = [];

module.exports = {
    // 生产环境移除console
    plugins: plugins,
    presets: ["@vue/cli-plugin-babel/preset"],
};
```

## 方案二

```bash title="安装"
yarn add terser-webpack-plugin -D
// or
npm install terser-webpack-plugin --save-dev
```

**注**：**方案一**和**方案二**配置移除**console.log()**是在**babel.config.js**中配置的。

```javascript title="使用方法"
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    configureWebpack: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        pure_funcs: ["console.log"],
                    },
                },
            }),
        ],
    },
};
```

:::info 注意事项
此次代码配置示例是在 **vue.config.js** 文件 📁 中配置的。
:::