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

如有錯誤，歡迎指出！