uni-app怎么设置打包后的JS文件混淆压缩配置

在前端开发内容学习中，uni-app怎么设置打包后的JS文件混淆压缩配置是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

manifest.json的confusion配置仅对App云打包生效，微信小程序和H5需通过vue.config.js集成javascript-obfuscator插件实现构建时混淆，且须限定业务文件、禁用破坏性选项并验证产物。

uni-app 项目打包后 JS 混淆压缩，不能靠 manifest.json 全局开启，也不能指望 HBuilderX 点“发行”就自动搞定——它只对 App（云打包）原生混淆生效，小程序/H5 必须自己配构建工具链。

manifest.json 的 confusion 配置只对 App 云打包有效

很多人误以为在 manifest.json 的 "app-plus" → "confusion" 下加 resources 就能保护所有 JS，其实它只影响最终生成的 iOS/Android 安装包（.ipa/.apk），且仅限 nvue 和独立 .js 文件（如 main.js 或条件编译在 app-plus 下的模块）。微信小程序、H5、支付宝等端完全无视这个配置。

• 配置写错路径（比如漏掉 app-plus 层级）会导致云打包时混淆不生效
• vue 页面里内联的 JS 不会被混淆，必须抽离成独立 .js 文件 + 条件编译包裹
• 如果该 JS 同时被非 App 端引用（如 H5），混淆后可能因语法兼容性报错

小程序/H5 必须用 webpack 插件做构建时混淆

微信小程序、H5 等基于 Webpack 构建的平台，得靠 javascript-obfuscator 或 TerserPlugin 在 vue.config.js 中注入。注意：uni-app 的默认构建流程不启用混淆，必须手动加。

• 推荐用 javascript-obfuscator（比 Terser 更强混淆能力），但别开 controlFlowFlattening 或 deadCodeInjection，否则小程序运行时报 Unexpected token 或白屏
• debugProtection: true 和 rotateStringArray: true 是安全与可读性的折中选择，实测兼容性较好
• 混淆目标应限定在业务逻辑文件（如 utils/api.js），避免混淆 node_modules 或框架代码，否则 require 失败
• H5 端混淆后需关掉 sourceMap，否则 devtools 仍能还原部分逻辑

混淆后必须验证实际产物是否生效

很多人配完就以为完事了，结果上线后 js 还是明文。关键要确认你检查的是正确路径下的文件：

• 小程序：打开 unpackage/dist/build/mp-weixin 目录，直接用文本编辑器打开任意 .js 文件，搜索关键词（如函数名）看是否已变成 _0xabc123 类似格式
• H5：检查 unpackage/dist/build/h5/static/js/ 下的 chunk 文件，不是 index.html 里的内联脚本
• App：解压 .ipa/.apk 后找 www/ 或 assets/ 目录，确认混淆文件内容是乱码而非 base64 编码（base64 是加密，不是混淆）
• 如果发现混淆没生效，先 console.log(process.env.NODE_ENV) 确认是否走的是 production 分支

混淆不是一劳永逸的事——每次升级 javascript-obfuscator 版本、切换 uni-app 编译器（v2/v3）、或引入新语法（如 optional chaining），都可能让混淆后的代码在某端崩溃。最稳妥的做法是：只混淆真正敏感的模块，混淆后必跑真机测试，而不是只信控制台日志。