最近被某大公司大佬虐了，要求混淆用vuecli3写的代码（啥敏感信息都没有，混淆个什么混淆...）

言归正传，现将混淆流程记录如下：

 

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”节点，官方文档地址：

如有错误，欢迎指出！