vue项目上线后去除控制台所有console.log打印-配置说明

JackieDYH2023-10-06 21:52

方式一

复制代码

npm  i   babel-plugin-transform-remove-console --save-dev

babel.config.js文件中添加

javascript 复制代码

// 然后在babel.config.js中添加判断
const prodPlugin = []

if (process.env.NODE_ENV === 'production') {
// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
  prodPlugin.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}

module.exports = {
  'presets': [
    '@vue/app'
  ],
  'plugins': [
    [
      'import',
      {
        'libraryName': 'ant-design-vue',
        'libraryDirectory': 'es',
        'style': true
      },
      'ant-design-vue'
    ],
    ...prodPlugin
  ]
}

方式二

复制代码

npm i uglifyjs-webpack-plugin --save-dev

2.1 vue-cli3 生成环境去除console.log
在项目目录vue.config.js

javascript 复制代码

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

configureWebpack: {
        //注释console
        optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            // warnings: false,
                            drop_console: false, //注释console
                            drop_debugger: false,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            ]
        }
}

2.2 vue-cli2 生成环境去除console.log
项目build 下面webpack.prod.config.js 文件中

javascript 复制代码

plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //drop_console  传递true以放弃对控制台的调用。*功能
          drop_console: true,
          // pure_funces 禁用console.log函数
          pure_funcs: ['console.log']
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
]