参考链接

背景

公司[代码]提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，[前端]代码虽然无法做到完全加密混淆，但是通过使用 [webpack]-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。

1. 本公司我们项目使用的是webpack4,所以应该使用2.60版本

• 安装 yarn add webpack-obfuscator@2.6.0javascript-obfuscator&2.6.0

• 配置 在vue.config.js配置

const JavaScriptObfuscator = require('webpack-obfuscator')

module.exports = {

  configureWebpack: {

    devtool: 'cheap-module-source-map',

    plugins: [

      new JavaScriptObfuscator({

        rotateStringArray: true

      },[])

    ]

  }

}

• 若只想在打包时加密混淆，本地运行时不混淆，可以进行以下的配置：

configureWebpack: (process.env.NODE_ENV === 'production') ? { 
    plugins: [ 
        new JavaScriptObfuscator({ // ... }, []) 
        ] } : {}

vue cli 2.x 配置在 webpack.prod.conf.js 中

构建

npm run build

构建文件示例对比

• 无混淆编译打包文件

• 配置混淆参数的打包文件