前端(VUE)打包上线去除console.log

前端(VUE)打包上线去除console.log

前端项目打包上线时经常遇到一个问题，写代码时的console.log忘记删除带到了正式环境，对于正式项目肯定是不友好的。可以直接使用插件“terser-webpack-plugin”来解决

引入

npm install terser-webpack-plugin --save-dev

配置

使用webpack构建的项目

在你的 webpack.config.js 中，配置 terser-webpack-plugin：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置项...
  optimization: {
    minimize: true, // 必须开启，否则配置不失效
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

使用vue-cli构建的项目

在你的 vue.config.js 中，配置 terser-webpack-plugin：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 其他配置项...
configureWebpack: config => {
    // 去除打包后的console.log
    let optimization = {
      minimize: true, // 必须开启，否则配置不失效
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
            },
          },
        }),
      ],
    };
    Object.assign(config, {
      optimization,
    });
  },
};