为什么需要给部署脚本加密
很多人写完前端项目，打包上传到服务器后，发现源码在浏览器里一览无余。尤其是那些自动执行的部署脚本，比如自动化配置、接口密钥、登录逻辑，一旦被扒开，轻则被人模仿，重则被恶意利用。尤其是一些运营活动页，刚上线就被同行“借鉴”了个彻底。
其实，完全隐藏代码几乎不可能，但我们可以让脚本变得难读、难懂、难复制，这就是“加密”的实际意义——不是绝对安全，而是提高门槛。
混淆：最实用的“加密”方式
真正意义上的加密是可逆的，而前端脚本更多用的是代码混淆（obfuscation）。它把原本清晰的变量名、函数结构打乱，变成一堆 a、b、c 和嵌套循环，让人看不明白逻辑。
比如你写的：
function checkLogin(user, token) {
if (user.id && token.length > 10) {
return true;
}
return false;
}经过混淆后可能变成：
function _0x12ab(c, d) {
var e = !![];
while (e) {
switch (_0x12ab['shift']()) { ... }
}
}虽然功能不变，但想还原逻辑就得花大功夫。
用 Webpack 搭配插件实现混淆
如果你用 Webpack 打包项目，可以装 javascript-obfuscator 插件。安装命令：
npm install --save-dev javascript-obfuscator webpack-obfuscator然后在 webpack.config.js 中加入：
const WebpackObfuscator = require('webpack-obfuscator');
module.exports = {
mode: 'production',
plugins: [
new WebpackObfuscator({
rotateStringArray: true,
stringArray: true,
stringArrayEncoding: 'base64'
})
]
};这样打包出来的 JS 文件，字符串会被编码，变量名打乱，连调试都困难。
敏感信息别硬编码在脚本里
有些人图省事，把 API 密钥、后台地址直接写在部署脚本里。就算混淆了，高手也能通过行为分析找出端倪。正确做法是：敏感配置走环境变量或后端接口动态获取。
比如 Vue 项目中用 .env.production 存基础 URL，而不是写死在代码里：
VUE_APP_API_URL=https://api.yoursite.com再通过 process.env.VUE_APP_API_URL 调用。虽然环境变量最终还是会暴露，但至少不会明文躺在 JS 文件里。
进阶：动态加载 + 加密片段
更进一步的做法是把核心逻辑拆出来，用 Base64 或 AES 加密后存放在服务端，页面运行时异步拉取，解密后再执行。
例如：
fetch('/secret-logic.enc')
.then(res => res.text())
.then(encrypted => {
const decrypted = atob(encrypted); // 简单 Base64 解码
eval(decrypted); // 动态执行
});虽然 eval 有风险，但在可控环境下可以使用。这种方式能有效防止静态扫描抓取关键逻辑。
浏览器控制台不是法外之地
哪怕脚本混淆得再狠，只要在浏览器里运行，总能通过断点、钩子、内存提取等方式反分析。所以别指望一劳永逸。重点是让普通查看者看不懂，让批量爬取者觉得不划算。
就像家门口装个普通锁，防的不是专业开锁匠，而是顺手牵羊的人。
小成本也能做点防护
如果你不用打包工具，只是个简单的 HTML 页面加几个脚本，也可以手动处理。比如用在线混淆工具（如 JavaScript Obfuscator）把关键函数粘进去，生成乱码版本再放回去。
或者把敏感字符串拆成数组拼接：
var key = ['a', 'p', 'i', '_', 'k', 'e', 'y'].join(''); // api_key虽然简单，但能挡住一眼看穿的尴尬。