vue在生产环境和测试环境去掉 console 打印日志 只保留 “error“、 “warn“

vue在生产环境和测试环境去掉 console 打印日志 只保留 “error”、 “warn”



一、安装插件

npm install babel-plugin-transform-remove-console

在这里插入图片描述

二、babel.config.js配置

const plugins = []
if (process.env.ENV === 'production' || process.env.ENV === 'staging') {
    //exclude(忽略)
    plugins.push(["transform-remove-console", { "exclude": ["error", "warn"] }])
}
module.exports = {
    presets: [
        // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
        '@vue/cli-plugin-babel/preset'
    ],
    plugins,
    'env': {
        'development': {
            // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
            // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
            'plugins': ['dynamic-import-node']
        }
    }
}

在这里插入图片描述

### 使用 Babel 插件移除生产环境中的 `console.log` 为了确保 Vue 项目的生产版本不会输出不必要的调试信息,可以利用 `babel-plugin-transform-remove-console` 来自动化这一过程。该方法不仅高效而且易于实现。 #### 安装依赖 首先,需要安装对应的 Babel 插件: ```bash yarn add babel-plugin-transform-remove-console -D // 或者使用 npm npm install babel-plugin-transform-remove-console --save-dev ``` 此命令会将必要的工具添加到开发依赖项中[^1]。 #### 修改 Babel 配置文件 接下来,在 `babel.config.js` 文件内加入特定条件判断语句,以便区分不同运行模式下的行为差异: ```javascript const prodPlugin = []; if (process.env.NODE_ENV === 'production') { // 对于生产构建而言,除了 error warn 外的所有 console 调用都将被删除 prodPlugin.push([ 'transform-remove-console', { exclude: ['error', 'warn'] } ]); } module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [...prodPlugin] }; ``` 上述设置能够有效防止敏感数据泄露的同时保持错误提示功能正常运作[^2]。 另外一种方式是在 Webpack 的优化选项里直接指定 Terser 压缩器的行为规则,从而达到相同的效果: ```javascript configureWebpack: (config) => { if (process.env.NODE_ENV === "production") { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ["console.log"]; } } ``` 这种方法同样适用于希望精简最终打包体积并提高安全性的情况[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七@归七

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值