vuecli3代码压缩混淆
最近被某大公司大佬虐了,要求混淆用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”节点,官方文档地址:https://www.npmjs.com/package/uglifyjs-webpack-plugin
如有错误,欢迎指出!