中国站长之家域名查询,成都的做网站公司,做网站的技术,网站网址怎么找文章目录 vue 项目代码混淆配置#xff08;自定义插件适用#xff09;带配置项注释一、概要二、混淆步骤1. 引入混淆插件2. 添加混淆配置3. 执行代码混淆 vue 项目代码混淆配置#xff08;自定义插件适用#xff09;带配置项注释
一、概要
本文章适用 vue-cli3/webpack4 … 文章目录 vue 项目代码混淆配置自定义插件适用带配置项注释一、概要二、混淆步骤1. 引入混淆插件2. 添加混淆配置3. 执行代码混淆 vue 项目代码混淆配置自定义插件适用带配置项注释
一、概要
本文章适用 vue-cli3/webpack4 搭建的vue项目vue-cli2或者 webpack23版本混淆查看这篇webpack2 webpack 3 低版本混淆代码打包配置完成后只需在文件名或者文件夹名加上 -obfuscate 后缀打包的时候即可将该js文件或者文件夹下的所有js文件混淆处理也可用于其他 webpack 构建的项目步骤差不多
二、混淆步骤
1. 引入混淆插件 使用 vue-cli3/4 新建的项目内置的 webpack 是 4 版本的所以这里只能使用 2 版本的混淆插件webpack5 可以使用最新的混淆插件node_modules/webpack/package.json 中可以查看当前项目的 webpack 版本 npm i javascript-obfuscator -D2. 添加混淆配置 在 vue.config.js中加入如下代码 //代码混淆
var JavaScriptObfuscator require(webpack-obfuscator);
// 生产环境测试和正式
const IS_PROD [production, prod, uat].includes(process.env.NODE_ENV);
module.exports {publicPath: process.env.NODE_ENV production ? ./ : /,productionSourceMap: false,configureWebpack: (config) {if (IS_PROD) {return {plugins: [new JavaScriptObfuscator({// 打乱Unicode数组顺序rotateUnicodeArray: true, // 紧凑 从输出混淆代码中删除换行符。compact: true, /* 此选项极大地影响了运行速度降低1.5倍的性能。 启用代码控制流展平。控制流扁平化是源代码的结构转换阻碍了程序理解。*/controlFlowFlattening: true, controlFlowFlatteningThreshold: 0.8,/* 此选项大大增加了混淆代码的大小最多200 此功能将随机的死代码块即不会执行的代码添加到混淆输出中从而使得更难以进行反向工程设计。*/deadCodeInjection: true, deadCodeInjectionThreshold: 0.5,// 调试保护 如果您打开开发者工具可以冻结您的浏览器。debugProtection: false, /* 如果选中则会在“控制台”选项卡上使用间隔强制调试模式这使得使用“开发人员工具”的其他功能变得更加困难。它是如何工作的一个调用调试器的特殊代码;在整个混淆的源代码中反复插入。*/debugProtectionInterval: false, /* 通过用空函数替换它们来禁用console.logconsole.infoconsole.error和console.warn。这使得调试器的使用更加困难。*/disableConsoleOutput: true, /* 锁定混淆的源代码使其仅在特定域和/或子域上运行。这使得有人只需复制并粘贴源代码并在别处运行就变得非常困难。多个域和子域可以将代码锁定到多个域或子域。例如要锁定它以使代码仅在www.example.com上运行添加www.example.com以使其在example.com的任何子域上运行请使用.example.com。*/domainLock: [], // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)identifierNamesGenerator: hexadecimal, // 此选项使所有全局标识符都具有特定前缀。identifiersPrefix: , inputFileName: ,log: false,// 不要启动 通过声明启用全局变量和函数名称的混淆。renameGlobals: false, /* 禁用模糊处理和生成标识符这些标识符与传递的RegExp模式匹配。例如如果添加^ someName则混淆器将确保以someName开头的所有变量函数名和函数参数都不会被破坏。*/reservedNames: [], /* 禁用字符串文字的转换字符串文字与传递的RegExp模式匹配。例如如果添加^ some * string则混淆器将确保以某些字符串开头的所有字符串都不会移动到stringArray。*/reservedStrings: [], /* 通过固定和随机在代码混淆时生成的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小建议使用此选项因为辅助函数可以引起注意。*/rotateStringArray: true, /* 默认情况下seed 0每次混淆代码时都会得到一个新结果即不同的变量名插入stringArray的不同变量等。如果需要可重复的结果请将种子设置为特定的整数。*/seed: 0, /* 此选项使输出代码能够抵抗格式化和变量重命名。如果试图在混淆代码上使用JavaScript美化器代码将不再起作用使得理解和修改它变得更加困难。需要紧凑代码设置。*/selfDefending: true, /* 请确保不要上传嵌入了内嵌源代码的混淆源代码因为它包含原始源代码。源映射可以帮助您调试混淆的Java Script源代码。如果您希望或需要在生产中进行调试可以将单独的源映射文件上载到秘密位置然后将浏览器指向该位置。*/sourceMap: false, // 这会将源的源映射嵌入到混淆代码的结果中。如果您只想在计算机上进行本地调试则非常有用。sourceMapBaseUrl: , sourceMapFileName: ,sourceMapMode: separate,/* 将stringArray数组移位固定和随机在代码混淆时生成的位置。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小建议使用此选项因为辅助函数可以引起注意。*/stringArray: true, /* 此选项可能会略微降低脚本速度。使用Base64或RC4对stringArray的所有字符串文字进行编码并插入一个特殊的函数用于在运行时将其解码回来。*/stringArrayEncoding: [base64], /* 您可以使用此设置调整字符串文字将插入stringArray的概率从0到1。此设置在大型代码库中很有用因为对stringArray函数的重复调用会降低代码的速度。*/stringArrayThreshold: 0.8, /* 您可以将混淆代码的目标环境设置为以下之一 Browser 、Browser No Eval 、Node 目前浏览器和节点的输出是相同的。*/target: browser, /* 转换混淆对象键。例如此代码var a {enabledtrue};使用此选项进行模糊处理时将隐藏已启用的对象键var a {};a [_0x2ae0 [0x0] true;。 理想情况下与String Array设置一起使用。*/transformObjectKeys: true, /* 将所有字符串转换为其unicode表示形式。例如字符串“Hello World”将被转换为“\ x48 \ x65 \ x6c \ x6c \ x6f \ x20 \ x57 \ x6f \ x72 \ x6c \ x64 \ x21”。*/unicodeEscapeSequence: true, // ... [See more](https://github.com/javascript-obfuscator/javascript-obfuscator)},[]),],};}},
};通过以上代码就完成JavaScriptObfuscator配置了 3. 执行代码混淆 build项目时代码就被混淆过了
