如何在Nuxt 3中实现Code Obfuscation？含.ts与.vue文件项目求助

方案一：基于 Webpack 的 javascript-obfuscator 配置 #

如果你的 Nuxt 3 项目使用 Webpack 构建（或需要兼容 Webpack 场景），可以通过 javascript-obfuscator 及其 loader 实现代码混淆：

1. 安装依赖

npm install javascript-obfuscator javascript-obfuscator-loader --save-dev

2. 修改 nuxt.config.ts 构建配置

export default defineNuxtConfig({
  build: {
    extend(config, { isDev, isClient }) {
      // 仅在生产环境的客户端代码中启用混淆
      if (!isDev && isClient) {
        // 处理 .js/.ts 文件
        config.module?.rules?.push({
          test: /\.(js|ts)$/,
          exclude: /node_modules/,
          use: {
            loader: 'javascript-obfuscator-loader',
            options: {
              compact: true,
              controlFlowFlattening: true,
              controlFlowFlatteningThreshold: 0.75,
              numbersToExpressions: true,
              simplify: true,
              shuffleStringArray: true,
              splitStrings: true,
              splitStringsChunkLength: 10
            }
          }
        })

        // 处理 .vue 文件中的 script 部分
        config.module?.rules?.forEach(rule => {
          if (rule.test?.test('.vue')) {
            const vueLoader = rule.use?.find((u: any) => u.loader === 'vue-loader')
            if (vueLoader) {
              vueLoader.options = {
                ...vueLoader.options,
                postLoaders: {
                  normal: 'javascript-obfuscator-loader?' + JSON.stringify({
                    compact: true,
                    controlFlowFlattening: true
                  })
                }
              }
            }
          }
        })
      }
    }
  }
})

方案二：基于 Vite 的 vite-plugin-obfuscator 配置 #

Nuxt 3 默认使用 Vite 作为构建工具，推荐使用更适配的 vite-plugin-obfuscator：

1. 安装依赖

npm install vite-plugin-obfuscator --save-dev

2. 修改 nuxt.config.ts 配置

import obfuscator from 'vite-plugin-obfuscator'

export default defineNuxtConfig({
  vite: {
    plugins: [
      obfuscator({
        globalOptions: {
          compact: true,
          controlFlowFlattening: true,
          controlFlowFlatteningThreshold: 0.8,
          stringArray: true,
          stringArrayEncoding: ['base64'],
          stringArrayThreshold: 0.8
        }
      })
    ]
  }
})

该插件会自动识别并处理项目中的 .ts、.js 以及 .vue 文件内的 script 代码，无需额外配置文件类型匹配。

关键注意事项 #

• 仅生产环境启用：开发环境开启混淆会严重拖慢热更新和调试效率，务必通过 isDev 判断环境。
• 排除第三方依赖：不要混淆 node_modules 内的代码，否则会导致依赖库运行异常。
• 权衡混淆强度：高等级的混淆（如开启 controlFlowFlattening）会增加代码体积并降低运行性能，需根据项目需求调整配置项。
• 模板部分限制：.vue 文件的模板编译后会生成渲染函数，目前没有通用的模板混淆方案，强行处理易引发渲染错误，建议忽略模板部分的混淆。
• 提前测试：混淆后的代码难以调试，发布前需完成全量功能测试，确保生产环境正常运行。

内容的提问来源于stack exchange，提问作者Göksel Doğan