Vue 项目中如何在打包时清除 console 和 debugger

vue-cli

与vue-cli2.0使用了uglifyjs-webpack-plugin 或 babel-plugin-transform-remove-console 插件进行优化配置不同，vue-cli3.0 在打包过程中就使用了terser-webpack-plugin插件进行优化。

vue-cli2.0

1,安装:babel-plugin-transform-remove-console 我们在开发过程中，肯定会用到console打印信息。但是呢，我们上线就要把console这些打印的信息给去掉吧，那时我们项目那么多打印，难道要一个个去掉吗，显然是不可能的；以下是解决方法

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

2，修改 babel.config.js（如果没有自己创建）

let plugins = [];
if (process.env.NODE_ENV === "production") {    // todo  if判断是否打包,打包环境下控制台去掉console.log,也可去掉if判断，整个项目不会出现console.log(不建议)
  plugins.push("transform-remove-console");
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: plugins
};

vue-cli3.0

在 vue.config.js 中的 configureWebpack 选项提供一个对象会被 webpack-merge 合并入最终的 webpack 配置，vue.config.js 配置如下：

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
        config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
        config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
    }
}