一、配置路径

1. vue-cli2 在 build 文件下面的webpack.prod.conf.js中配置

2. vue-cli3 在项目目录下的vue.config.js文件里面配置

二、安装插件依赖

依赖: uglifyjs-webpack-plugin.

yarn add -D uglifyjs-webpack-plugin  或  npm install uglifyjs-webpack-plugin

三、vue-cli2 修改webpack.prod.conf.js文件中的UglifyJsPlugin插件配置

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false,
      drop_debugger: true,  //去掉debugger
      drop_console: true,  // 去掉console
      pure_funcs: ['console.log']// 移除console
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
})

四、vue-cli3修改 vue.config.js 文件中进行配置

1. 在文件头部引入

//打包配置自动忽略console.log等
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

2. 在module.exports下configureWebpack中plugins配置

//打包环境去掉console.log等
new UglifyJsPlugin({
  uglifyOptions: {
     compress: {
       //warnings: false, 注释不然打包会报错如图下图
       drop_console: true,  //注释console
       drop_debugger: true, //注释debugger
       pure_funcs: ['console.log'], //移除console.log
     },
   },
}),

报错效果如下：warnings is not a supported option

问题出现解决办法：

//方法1：将uglifyjs-webpack-plugin 的版本降低到 V 1.1.1版本就可以正常使用了。
yarn add -D uglifyjs-webpack-plugin@1.1.1  或  npm install uglifyjs-webpack-plugin@1.1.1

//方法2：要把里边的移除警告去掉
// warnings: false,  //移除警告
 drop_console: true,  //注释console
 drop_debugger: true, //注释debugger
 pure_funcs: ['console.log'], //移除console.log

3. vue.config.js文件配置全部如下.

//打包配置自动忽略console.log等
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
module.exports = {
	publicPath: './',
	devServer: {
		......
	},
	css:{
		......
	},
	configureWebpack: {
    plugins: [
      //打包环境去掉console.log
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console: true,  //注释console
            drop_debugger: true, //注释debugger
            pure_funcs: ['console.log'], //移除console.log
          },
        },
      }),
    ],
  }
}