为什么要混淆

• 前端代码中有一个sign,和签名有关，现在不希望别人看到
• 如果代码没有混淆的话，在浏览器控制台中可以直接看到对应的js文件

混淆方法

• 项目是使用的vite，一开始在网上去查找vite配套的一些npm包，例如rollup-plugin-obfuscator，vite-plugin-obfuscator，但是我用到我的项目中，或多或少的会出现一些问题，例如有些css样式没有生效（可能是全局样式或者unocss的原因），又或者是import.meta为undefined，导致读取不了环境变量

解决方法

• 使用javascript-obfuscator
• "build": "set NODE_ENV=production&& vite build && javascript-obfuscator ./dist --output ./dist", 打包命令里添加后半段，获取到生成的dist文件夹下的js文件，并进行混淆

javascript-obfuscator使用示例

{
    "compact": true,
    "controlFlowFlattening": true,
    "controlFlowFlatteningThreshold": 0.75,
    "deadCodeInjection": true,
    "deadCodeInjectionThreshold": 0.4,
    "debugProtection": false,
    "debugProtectionInterval": false,
    "disableConsoleOutput": true,
    "identifierNamesGenerator": "hexadecimal",
    "log": false,
    "renameGlobals": false,
    "rotateStringArray": true,
    "selfDefending": true,
    "stringArray": true,
    "stringArrayEncoding": "base64",
    "stringArrayThreshold": 0.75,
    "unicodeEscapeSequence": false
}

• javascript-obfuscator a.js --config test.json --output b.js
• 上面命令表示， javascript-obfuscator将会使用test.json指定的配置，对 a.js 执行混淆，结果输出到 b.js。
• 方式一：

如果这样配置：javascript-obfuscator ./dist/assets/js --output ./dist/assets/js-obfuscated

则会在打包文件中新建一个js-obfuscated文件夹，存放混淆加密的文件，原来assets/js下的原始文件则不会被改变

• 方式二：

如果这样配置：javascript-obfuscator ./dist/assets/js --output ./dist/assets/js 则会将原来assets/js下的文件进行覆盖，会得到混淆加密的文件，原始文件会被覆盖掉