Vue 3 生产环境代码混淆配置问题咨询

执行vue-cli-service build --mode production构建后，用serve -s dist/运行，仍能清晰看到代码内容（比如Vuex mutations的函数代码），示例代码如下：

, De = {
            setUser: (e, t) => e.user = t,
            setUserRoles: (e, t) => e.user.roles = t,
            upsertGroup: (e, t) => {
                const n = t.id
                  , r = e.groups.findIndex((e => e.value === n))
                  , o = {
                    title: t.name,
                    value: t.id
                };
                -1 !== r ? e.groups[r] = o : e.groups.push(o)
            }
            ,
            upsertEmployee: (e, t) => {
                const n = t.id;
                if (t.roles.some((e => e === Pe.z7.customer)))
                    return void (e.employees = e.employees.filter((e => e.id !== n)));
                const r = e.employees.findIndex((e => e.id === n))
                  , o = {
                    ...t,
                    title: `${t.firstName} ${t.lastName}`,
                    value: t.id
                };
                -1 !== r ? e.employees[r] = o : e.employees.push(o)
            }
        }
          , je = {
            fetchEmployees: async ({state: e}) => {
                if (!e.employees.length)
                    try {
                        const t = await (0,
                        y.Oc)();
                        e.employees = t.map(( ({user: e}) => ({
                            ...e,
                            title: `${e.firstName} ${e.lastName}`,
                            value: e.id
                        })))
                    } catch {
                        (0,
                        b.oR)("Unable to fetch employees. Please try again by refreshing the page.", {
                            type: "error"
                        })
                    }
            }
            ,

当前的vue.config.js配置：

const { defineConfig } = require("@vue/cli-service");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "",
  productionSourceMap: false,

  css: {
    loaderOptions: {
      sass: {
        implementation: require("sass"),
        additionalData: '@import "@/assets/scss/main.scss";',
      },
    },
  },

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.optimization = {
        minimize: true,
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              format: {
                comments: false,
              },
              compress: {
                drop_console: true,
                drop_debugger: true,
              },
              mangle: {
                toplevel: true,
              },
            },
            extractComments: false,
          }),
        ],
      };
    }
  },
});

请问是否遗漏了关键配置？还需要哪些操作才能完成生产环境代码的压缩/混淆？

你的配置已经做了基础压缩，但存在几个可优化的点，调整后即可实现有效混淆：

1. 移除手动引入的TerserPlugin #

Vue CLI默认已集成TerserPlugin，手动引入的版本可能和CLI内置的Webpack版本不兼容，导致压缩失效。直接删除const TerserPlugin = require("terser-webpack-plugin");这一行。

2. 合并而非覆盖默认优化配置 #

直接替换config.optimization会丢失Vue CLI默认的优化逻辑，改为合并原有配置的方式：

configureWebpack: (config) => {
  if (process.env.NODE_ENV === "production") {
    // 遍历默认minimizer，修改TerserPlugin的配置
    config.optimization.minimizer = config.optimization.minimizer.map(minimizer => {
      if (minimizer.constructor.name === 'TerserPlugin') {
        minimizer.options.terserOptions = {
          ...minimizer.options.terserOptions,
          format: { comments: false },
          compress: {
            drop_console: true,
            drop_debugger: true,
            reduce_vars: true, // 合并重复变量
            dead_code: true // 移除死代码
          },
          mangle: {
            toplevel: true,
            // 若代码中有依赖属性名的反射操作，需保留对应属性
            // reserved: ['user', 'roles']
          }
        };
        minimizer.options.extractComments = false;
      }
      return minimizer;
    });
  }
},

3. 验证构建环境正确性 #

在vue.config.js顶部添加日志，确认构建时环境变量是否为production：

console.log('当前构建环境:', process.env.NODE_ENV);

如果输出不是production，检查--mode production命令是否正确执行，或项目根目录是否存在.env.production文件干扰环境变量。

4. 启用更强混淆（可选） #

若需要更严格的混淆效果，可添加以下Terser配置：

mangle: {
  toplevel: true,
  properties: {
    regex: /^_/, // 只混淆下划线开头的属性
    reserved: ['user'] // 保留业务必需的属性名
  },
  keep_classnames: false, // 混淆类名
  keep_fnames: false // 混淆函数名
}

注意：启用属性混淆前，需确保代码中没有通过字符串访问属性的逻辑（如obj['user']），否则会导致功能异常。

5. 清理缓存后重新构建 #

旧的构建缓存可能导致压缩不生效，执行以下命令清理后重新构建：

rm -rf node_modules/.cache
vue-cli-service build --mode production

内容的提问来源于stack exchange，提问作者Leo