1:第一种方法

1、安装 “uglifyjs-webpack-plugin”

cnpm i --save uglifyjs-webpack-plugin

没有安装cnpm的同学可以用npm

2、在项目根目录下创建一个名为 vue.config.js的文件

3、在vue.config.js中引入uglifyjs-webpack-plugin

const UglifyPlugin = require('uglifyjs-webpack-plugin')

4、在vue.config.js中配置uglifyjs-webpack-plugin

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV == 'production') {
      // 为生产环境修改配置
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
            uglifyOptions: {
                warnings: false,
                compress: {
                  drop_console: true, 
                  drop_debugger: false,
                  pure_funcs: ['console.log'] 
                }
            }
         })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
    }
  }
};

这就可以了，接下来大家可以打包试试了

cnpm run build

如果报错的话，估计是uglifyjs-webpack-plugin版本又更新了，可能需要修改配置中的 “minimizer”节点，官方文档地址：uglifyjs-webpack-plugin - npm

如有错误，欢迎指出！

2:第二张方法

打包后的代码段：app.js

找到文件夹 build/webpack.pro.conf.js

• 在UglifyJsPlugin 插件中39行加入两行代码

1. drop_console: true,
2. pure_funcs: [‘console.log’]   去掉注释

   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
    }),

3：第三张方法

1. 安装node.js
2. 安装当前应用 -- uglifyjs 

　　　　如何安装node.js就不再介绍了, 百度一下一大把.安装uglifyjs如下:

　　　　　　npm install uglify-js -g

演示如何使用uglifyjs压缩JS

打开一个用于存放JS文件的文件夹，进入到cmd

此时输入命令对app.8d991fddffba99b1a623.js文件进行压缩并输出文件名为app.8d991fddffba99b1a623.min.js的文件:      m是浑浊 o是压缩

uglifyjs app.8d991fddffba99b1a623.js -o app.8d991fddffba99b1a623.min.js 也可以运行如下代码, 测试一下-m参数:

uglifyjs app.8d991fddffba99b1a623.js -m -o app.8d991fddffba99b1a623.min.js