vue3+vite项目打包文件混淆加密

给JS文件进行混淆加密的主要原因是为了增加代码的安全性并保护知识产权。具体来说，混淆加密技术通过改变JS代码的语法形式、增加多余的代码结构、添加无用的标识符、重命名变量等方式，使代码变得混乱无序，难以被理解和分析。

这种处理可以有效地防止黑客攻击和非法访问，因为混淆加密后的代码使得攻击者难以阅读和理解代码的逻辑和结构，从而增加了破解代码的难度。同时，混淆加密还可以防止其他人轻易窃取和复制这些代码，从而保护软件开发者和企业的知识产权，防止他们的代码被恶意篡改、复制或盗用。

总的来说，JS文件的混淆加密是一种重要的技术，它不仅可以提高Web应用程序的安全性，还可以保护代码的知识产权。然而，开发人员在使用混淆加密时应该谨慎，确保不影响代码的性能和可维护性，并定期更新和强化安全性措施，以全面保护Web应用程序的安全。

一、vue工程中的文件，打包进行文件混淆加密

// 安装混淆加密插件
npm install --save-dev vite-plugin-obfuscator

在vite.config.ts文件配置混淆加密

import { viteObfuscateFile } from 'vite-plugin-obfuscator';

export default defineConfig({
	plugins: [
		viteObfuscateFile({
			compact: true,
			controlFlowFlattening: false,
			controlFlowFlatteningThreshold: 0.75,
			deadCodeInjection: false,
			deadCodeInjectionThreshold: 0.4,
			debugProtection: false,
			debugProtectionInterval: 0,
			disableConsoleOutput: false,
			domainLock: [],
			domainLockRedirectUrl: 'about:blank',
			forceTransformStrings: [],
			identifierNamesCache: null,
			identifierNamesGenerator: 'hexadecimal',
			identifiersDictionary: [],
			identifiersPrefix: '',
			ignoreImports: false,
			inputFileName: '',
			log: false,
			numbersToExpressions: false,
			optionsPreset: 'default',
			renameGlobals: false,
			renameProperties: false,
			renamePropertiesMode: 'safe',
			reservedNames: [],
			reservedStrings: [],
			seed: 0,
			selfDefending: false,
			simplify: true,
			sourceMap: false,
			sourceMapBaseUrl: '',
			sourceMapFileName: '',
			sourceMapMode: 'separate',
			sourceMapSourcesMode: 'sources-content',
			splitStrings: false,
			splitStringsChunkLength: 10,
			stringArray: true,
			stringArrayCallsTransform: true,
			stringArrayCallsTransformThreshold: 0.5,
			stringArrayEncoding: [],
			stringArrayIndexesType: ['hexadecimal-number'],
			stringArrayIndexShift: true,
			stringArrayRotate: true,
			stringArrayShuffle: true,
			stringArrayWrappersCount: 1,
			stringArrayWrappersChainedCalls: true,
			stringArrayWrappersParametersMaxCount: 2,
			stringArrayWrappersType: 'variable',
			stringArrayThreshold: 0.75,
			target: 'browser',
			transformObjectKeys: false,
			unicodeEscapeSequence: false,
		}),
	],
});

二、如何给单独的js文件进行混淆加密？

比如vue工程中public文件夹下有想要混淆加密的js文件，应该怎么加密呢？

一种常见的方法是使用 javascript-obfuscator 这样的 JavaScript 混淆工具。以下是如何在 Vite 项目中结合使用 javascript-obfuscator 的基本步骤：

1. 安装 javascript-obfuscator:

使用 npm 或 yarn 安装 javascript-obfuscator：

npm install --save-dev javascript-obfuscator  
# 或者  
yarn add --dev javascript-obfuscator

1. 在 package.json 中配置脚本:

在 package.json 文件的 scripts 部分，添加一个用于混淆构建后的 JavaScript 文件的脚本。例如：

"scripts": {  
  "dev": "vite",  
  "build": "vite build && javascript-obfuscator ./dist/assets/js --output ./dist/assets/js-obfuscated",  
  "serve": "vite preview"  
}

注意：这里的路径（./dist/assets/js 和 ./dist/assets/js-obfuscated）可能需要根据你的项目结构进行调整。

方式一：

如果这样配置：javascript-obfuscator ./dist/assets/js --output ./dist/assets/js-obfuscated

则会在打包文件中新建一个js-obfuscated文件夹，存放混淆加密的文件，原来assets/js下的原始文件则不会被改变

方式二：

如果这样配置：javascript-obfuscator ./dist/assets/js --output ./dist/assets/js

则会将原来assets/js下的文件进行覆盖，会得到混淆加密的文件，原始文件会被覆盖掉