Vue CLI 构建过程中代码混淆（Mangle）未生效问题的解决方案

问题背景

在使用 Vue CLI 构建的vue2老项目时，我们通常会部署多个环境，例如我司会分为生产环境、预发布环境和预发布测试环境，每个环节都会配置一个build:xxx命令，在package下会使用--mode来和配置不同的.env环境配置，但是使用了--mode不为production时会导致打包出文来的--mode production不一致（NODE_ENV=production），构建出的 JavaScript 代码不仅被压缩（移除空格、注释、合并代码等）。

症状详述

非--mode production打包配置特定本地生产构建例如（build:local）时出现了一个奇怪的问题：构建输出的 JS 文件确实被压缩了，但代码混淆（Mangle）并未生效，并且路由懒加载分包等打包配置失效，而且变量名、函数名等也未被混淆（Mangle），即将它们替换为简短的、无意义的字符（如 e, t, n），以进一步减小文件体积并提高代码安全性，并且变量和函数名依然保持源代码中的可读名称，按照vue-cli和github上的issuse官方回复在打包的.env.xxx文件中配置NODE_ENV=production依旧失效.

• 构建命令：例如使用自定义的 npm run build:local 命令，该命令旨在测试预发布环境构建，但需要加载 .env.local 文件中的特定环境变量。

• vue.config.js 配置：在 vue.config.js 的 chainWebpack 中，明确针对 process.env.NODE_ENV === 'production' 的情况，配置了 TerserPlugin 来进行代码压缩和混淆。尝试了多种配置方式：

  • 确保 config.optimization.minimize(true) 被调用
  • 通过 config.optimization.minimizer('terser').tap(args => ...) 修改 Terser 选项
  • 设置 args.terserOptions.mangle = true
  • 设置更具体的 mangle 选项
  • 尝试删除 mangle 选项，使用 Terser 默认行为

• 日志确认：通过日志确认了构建时 NODE_ENV 确实是 production，且 Terser 配置正确传递

• 实际输出：代码被压缩（无空格和换行），但所有变量名、函数名、类名保持原样，未被混淆

排查过程

1. 清理缓存：删除 node_modules 和 dist 目录，清除 npm 缓存，重新安装依赖并构建 → 问题依旧

2. 检查 .env 文件：确认 .env.local 或其他环境文件中没有设置禁用优化的选项

3. 简化 Terser 配置：只保留基础的 mangle 设置 → 问题依旧

4. 使用 vue inspect：运行 vue inspect --mode [your_mode] > webpack.config.js 检查最终生成的 Webpack 配置

5. 检查构建命令与 --mode 参数：发现关键点是 Vue CLI 的 --mode 参数不仅会加载对应的 .env 文件，还会影响 Webpack 的默认配置。即使 NODE_ENV 被设置为 production，--mode local 可能导致应用了一些不利于代码混淆的开发模式默认值

最终解决方案

问题的关键在于 --mode 参数对 Vue CLI 内部优化行为的影响。解决方案是：

// package.json -> scripts
"build:local": "dotenv -e .env.local -- vue-cli-service build --mode production"

解释

• dotenv -e .env.local --：

  • 使用 dotenv-cli 工具（需要先安装 npm install --save-dev dotenv-cli）
  • -e .env.local 参数指示从 .env.local 文件加载环境变量
  • -- 表示 dotenv-cli 的参数结束，后面是需要执行的实际命令
• vue-cli-service build --mode production：
  • --mode production 是关键！这明确告诉 Vue CLI 使用生产模式的配置和默认值
  • 在生产模式下，Vue CLI 会默认启用包括代码混淆在内的所有优化措施
  • 同时正确应用 chainWebpack 中对 Terser 的配置

这种方式既加载了 .env.local 文件中的环境变量，又确保了 Vue CLI 运行在完全的 production 模式下，使 Terser 的代码混淆功能正常启用。

总结与启示

• Vue CLI 的构建行为受到 NODE_ENV 环境变量和 --mode 参数的共同影响
• NODE_ENV=production 主要用于告知依赖库和构建工具应该进行生产优化
• --mode [mode_name] 主要用于加载 .env.[mode_name] 文件，并影响 Vue CLI 应用的 Webpack 默认配置
• 如需同时加载特定环境变量文件并保持完整生产优化，可使用 dotenv-cli 等工具
• 遇到预期优化未生效时，vue inspect 是诊断问题的有力工具