如何在vue.config.js配置代码混淆加密、压缩？

在Vue项目中防止代码被反编译是一个挑战，因为JavaScript是一种解释型语言，它的源码很容易被查看或反编译。但是，你可以采取一些措施来增加反编译的难度：

1、使用Webpack的UglifyJsPlugin插件进行代码混淆。

2、使用JavaScript混淆器，如js-obfuscator。

3、使用环境变量和条件编译来在不同环境下使用不同的代码。

4、将核心逻辑通过Web Workers或者第三方服务进行隔离。

一、如何在Vue项目中使用UglifyJsPlugin插件进行代码混淆：

1、安装UglifyJsPlugin插件（如果你使用的是Vue CLI 3或以下版本，可能需要安装webpack和相关的webpack-cli）。

npm install uglifyjs-webpack-plugin --save-dev

 2、打开vue.config.js 文件

'use strict'
const {	defineConfig } = require('@vue/cli-service');
const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = process.env.VUE_APP_TITLE || 'VUE模板案例' // 网页标题
const port = process.env.port || process.env.npm_config_port || 9999 // 端口


module.exports = defineConfig({
  transpileDependencies: false,
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "assets",
  indexPath: "index.html",
  // lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  // webpack-dev-server 相关配置
  devServer: {
    // host: 'localhost',
    port: port,
    open: false,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:8848`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    // historyApiFallback: true,
    // allowedHosts: "all",
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true, // 移除debugger
              drop_console: true, // 移除console
              pure_funcs: ['console.log'] // 移除console.log
            },
          },
          sourceMap: false,
          parallel: true, //使用多线程
        })
      );
    }
    config.resolve = {
      name: name,
      resolve: {
        alias: {
          '@': resolve('src')
        },
      },
    };
  }
});

二、使用 webpack-obfuscator 插件进行代码混淆：

1、安装 webpack-obfuscator 和 compression-webpack-plugin 插件

npm i webpack-obfuscator -D

npm i compression-webpack-plugin -D

如果安装报错可以尝试使用 --legacy-peer-deps 选项，这个选项会让 npm 忽略 peer dependencies 的版本冲突，可以使用以下命令来安装：

npm i webpack-obfuscator -D --legacy-peer-deps

或者使用 --force 选项，这个选项会让 npm 忽略所有的版本冲突并强制安装。

npm i webpack-obfuscator -D --force

注：可以使用  npm list webpack 查询项目依赖的webpack，Webpack@5以上版本

参考文档：webpack-obfuscator - npm

2、打开vue.config.js 文件

const { defineConfig } = require('@vue/cli-service')
let CompressionPlugin = require("compression-webpack-plugin");
const JavaScriptObfuscator = require('webpack-obfuscator');
const encryption = true; // 打包后的代码是否加密

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = process.env.VUE_APP_TITLE || 'VUE模板案例' // 网页标题
const port = process.env.port || process.env.npm_config_port || 9999 // 端口

module.exports = defineConfig({
  transpileDependencies: false,
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "assets",
  indexPath: "index.html",
  // lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  // webpack-dev-server 相关配置
  devServer: {
    // host: 'localhost',
    port: port,
    open: false,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:8848`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    // historyApiFallback: true,
    // allowedHosts: "all",
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV == 'development') {
      module.exports = {
        lintOnSave: false, //是否开启eslint保存检测 ,它的有效值为 true || false || 'error'
        devServer: {
          // open:true,//启动项目后自动开启浏览器
          port: 8080, //端口号
          host: '0.0.0.0',
          disableHostCheck: true,
          https: false, //是否开启协议名,如果开启会发出警告
          hotOnly: false, //热模块更新的一种东西,webpack中自动有过配置,但如果我们下载一些新            的模块可以更好的给我更新一些配置
          proxy: {
            //配置跨域
            '/api': { //配置跨域的名字
              target: ' https://xxx.xxx/api', //跨域的地址
              changOrigin: true, //是否跨域
              pathRewrite: { //当前的名字
                '^/api': ''
              }
            }
          }
        }
      };
    }

    if (process.env.NODE_ENV === 'production' && encryption == true) {
      return {
        plugins: [
          new CompressionPlugin({
            algorithm: 'gzip', //'brotliCompress'
            test: /\.js$|\.html$|\.css/, // + $|\.svg$|\.png$|\.jpg
            threshold: 10240, //对超过10k的数据压缩
            deleteOriginalAssets: false //不删除原文件
          }),
          //js代码加密
          new JavaScriptObfuscator({
            rotateUnicodeArray: true, // 必须为true
            compact: true, // 紧凑 从输出混淆代码中删除换行符。
            controlFlowFlattening: false, // 此选项极大地影响了运行速度降低1.5倍的性能。 启用代码控制流展平。控制流扁平化是源代码的结构转换，阻碍了程序理解。
            controlFlowFlatteningThreshold: 0.8,
            deadCodeInjection: true, // 此选项大大增加了混淆代码的大小（最多200％） 此功能将随机的死代码块（即：不会执行的代码）添加到混淆输出中，从而使得更难以进行反向工程设计。
            deadCodeInjectionThreshold: 0.5,
            debugProtection: true, // 调试保护  如果您打开开发者工具，可以冻结您的浏览器。 
            debugProtectionInterval: 1000, // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，这使得使用“开发人员工具”的其他功能变得更加困难。它是如何工作的？一个调用调试器的特殊代码;在整个混淆的源代码中反复插入。
            disableConsoleOutput: true, // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
            domainLock: [], // 锁定混淆的源代码，使其仅在特定域和/或子域上运行。这使得有人只需复制并粘贴源代码并在别处运行就变得非常困难。多个域和子域可以将代码锁定到多个域或子域。例如，要锁定它以使代码仅在www.example.com上运行添加www.example.com，以使其在example.com的任何子域上运行，请使用.example.com。
            identifierNamesGenerator: 'hexadecimal', // 使用此选项可控制标识符（变量名称，函数名称等）的混淆方式。
            identifiersPrefix: '', // 此选项使所有全局标识符都具有特定前缀。
            inputFileName: '',
            log: false,
            renameGlobals: false, // 不要启动 通过声明启用全局变量和函数名称的混淆。 
            reservedNames: [], // 禁用模糊处理和生成标识符，这些标识符与传递的RegExp模式匹配。例如，如果添加^ someName，则混淆器将确保以someName开头的所有变量，函数名和函数参数都不会被破坏。
            reservedStrings: [], // 禁用字符串文字的转换，字符串文字与传递的RegExp模式匹配。例如，如果添加^ some * string，则混淆器将确保以某些字符串开头的所有字符串都不会移动到`stringArray`。
            rotateStringArray: true, // 
            seed: 0, // 默认情况下（seed = 0），每次混淆代码时都会得到一个新结果（即：不同的变量名，插入stringArray的不同变量等）。如果需要可重复的结果，请将种子设置为特定的整数。
            selfDefending: false, // 此选项使输出代码能够抵抗格式化和变量重命名。如果试图在混淆代码上使用JavaScript美化器，代码将不再起作用，使得理解和修改它变得更加困难。需要紧凑代码设置。
            sourceMap: false, // 请确保不要上传嵌入了内嵌源代码的混淆源代码，因为它包含原始源代码。源映射可以帮助您调试混淆的Java Script源代码。如果您希望或需要在生产中进行调试，可以将单独的源映射文件上载到秘密位置，然后将浏览器指向该位置。
            sourceMapBaseUrl: '', // 这会将源的源映射嵌入到混淆代码的结果中。如果您只想在计算机上进行本地调试，则非常有用。
            sourceMapFileName: '',
            sourceMapMode: 'separate',
            stringArray: true, // 将stringArray数组移位固定和随机（在代码混淆时生成）的位置。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
            stringArrayEncoding: ['base64'], // 此选项可能会略微降低脚本速度。使用Base64或RC4对stringArray的所有字符串文字进行编码，并插入一个特殊的函数，用于在运行时将其解码回来。
            stringArrayThreshold: 0.8, // 您可以使用此设置调整字符串文字将插入stringArray的概率（从0到1）。此设置在大型代码库中很有用，因为对stringArray函数的重复调用会降低代码的速度。
            target: 'browser', // 您可以将混淆代码的目标环境设置为以下之一： Browser 、Browser No Eval 、Node 目前浏览器和节点的输出是相同的。
            transformObjectKeys: false, // 转换（混淆）对象键。例如，此代码var a = {enabled：true};使用此选项进行模糊处理时，将隐藏已启用的对象键：var a = {};a [_0x2ae0 [（'0x0'）] = true;。 理想情况下与String Array设置一起使用。
            unicodeEscapeSequence: true, // 将所有字符串转换为其unicode表示形式。例如，字符串“Hello World！”将被转换为“'\ x48 \ x65 \ x6c \ x6c \ x6f \ x20 \ x57 \ x6f \ x72 \ x6c \ x64 \ x21”。
          }, ['abc.js']) // abc.js 是不混淆的代码
        ],
      }
    };

    if (process.env.NODE_ENV === 'production' && encryption == false) {
      return {
        plugins: [
          new CompressionPlugin({
            algorithm: 'gzip', //'brotliCompress'
            test: /\.js$|\.html$|\.css/, // + $|\.svg$|\.png$|\.jpg
            threshold: 10240, //对超过10k的数据压缩
            deleteOriginalAssets: false //不删除原文件
          }),
        ],
      }
    };

    config.resolve = {
      name: name,
      resolve: {
        alias: {
          '@': resolve('src')
        },
      },
    };
  },
});