以下是在 Vite 3 + Vue 3 项目中使用javascript-obfuscator实现前端部署加密混淆的详细步骤：
1. 安装javascript-obfuscator
在你的项目根目录下（也就是包含package.json文件的目录），通过命令行运行以下命令来安装javascript-obfuscator：
npm install --save-dev javascript-obfuscator
或者如果使用yarn作为包管理工具：
yarn add --dev javascript-obfuscator
2. 创建混淆脚本文件
在项目根目录下创建一个新的 JavaScript 文件，例如命名为obfuscate.js，这个文件将用于配置和执行代码混淆操作。以下是一个简单的示例代码内容：
const JavaScriptObfuscator = require('javascript-obfuscator'); const fs = require('fs'); const path = require('path'); // 获取要混淆的输入文件路径，这里假设是构建后的js文件，可根据实际情况调整 const inputFile = path.join(__dirname, 'dist/assets/index.js'); // 定义混淆后的输出文件路径 const outputFile = path.join(__dirname, 'dist/assets/index-obfuscated.js'); // 读取输入文件的内容 const inputCode = fs.readFileSync(inputFile, 'utf8'); // 配置混淆选项，可根据需求进行调整 const options = { compact: true, controlFlowFlattening: true, deadCodeInjection: true, // 其他更多的配置选项可以在这里添加，例如混淆变量名、字符串加密等 }; // 执行混淆操作 const obfuscatedCode = JavaScriptObfuscator.obfuscate(inputCode, options); // 将混淆后的代码写入输出文件 fs.writeFileSync(outputFile, obfuscatedCode.getObfuscatedCode());
在上述代码中：
- 首先引入了
javascript-obfuscator以及 Node.js 的文件系统模块fs和路径模块path。 - 然后指定了要混淆的输入文件路径（这里假设是 Vite 构建后生成在
dist/assets/目录下的index.js文件，你需要根据自己项目实际构建输出的位置和文件名来调整）和混淆后的输出文件路径。 - 接着读取输入文件的内容，配置了一些基本的混淆选项（像压缩代码、控制流扁平化、死代码注入等，还有很多其他可用的配置选项可按需添加，例如
identifierNamesGenerator用于控制变量名的混淆生成规则等）。 - 最后执行混淆操作并将混淆后的代码写入到输出文件中。
3. 修改package.json文件中的脚本命令
打开项目的package.json文件，在scripts部分添加一个用于执行混淆操作的命令，例如：
{ "scripts": { "dev": "vite", "build": "vite build", "obfuscate": "node obfuscate.js" } }
这里添加了"obfuscate": "node obfuscate.js"，意味着之后可以通过命令行运行npm run obfuscate或者yarn obfuscate来执行前面创建的混淆脚本。
4. 构建项目并执行混淆
首先，按照正常的流程使用 Vite 构建你的 Vue 3 项目，通过命令行运行：
npm run build
或者
yarn build
这一步会生成项目的构建输出文件，通常在dist目录下。
然后，再运行前面添加的混淆脚本命令：
npm run obfuscate
或者
yarn obfuscate
这样就会对构建后的 JavaScript 文件进行混淆处理，并生成混淆后的文件（按照obfuscate.js脚本中定义的输出路径）。
5. 在 HTML 文件中引用混淆后的文件（如果需要）
如果你的项目是通过 HTML 文件直接引用 JavaScript 文件的，那么需要把原来引用构建后原始js文件的地方替换为引用混淆后的文件（也就是前面定义的index-obfuscated.js这类文件）。
例如，原本在 HTML 中有这样的引用：
<script src="/assets/index.js"></script>
需要修改为：
<script src="/assets/index-obfuscated.js"></script>
不过要注意的是，虽然代码混淆可以在一定程度上增加代码解读的难度，但它并不能完全保证代码的绝对安全，对于有高安全需求的项目，还需要综合运用多种安全防护措施。
此外，javascript-obfuscator的配置选项众多，你可以深入研究并根据项目的具体需求进行更精细的配置，以达到更好的混淆效果。
