本文介绍了如何结合 Jenkins 与 Gitee 实现前端项目的自动化持续集成与部署。主要内容包括环境准备（Jenkins、Node.js、Git）、插件安装（Gitee、NodeJS、SSH）、凭证配置（Gitee 令牌、SSH 密钥）、任务创建（源码管理、构建触发器、打包步骤、部署步骤）以及流程测试与常见问题排查。核心流程为代码提交触发 Webhook，Jenkins 拉取代码、安装依赖、打包并推送至 Nginx 服务器，适用于 Vue/React 等主流前端框架。
package.json）首先在 Jenkins「系统管理」→「插件管理」→「可选插件」中安装以下插件：
安装完成后重启 Jenkins 生效。
NodeJS 18），「NodeJS 安装目录」填写服务器上 Node 的路径（如 /usr/local/node）projects 权限）Gitee 凭证）如果部署到远程 Nginx 服务器，需配置 SSH 凭证：
root）进入 Jenkins「系统管理」→「系统配置」→「Publish over SSH」：
Nginx 服务器）frontend-cicd）https://gitee.com/你的账号/你的仓库.git）*/master 或 */dev）http://Jenkins 服务器 IP:8080/gitee-project-hook/）NodeJS 18）如果是 Windows 服务器，选择「执行 Windows 批处理命令」，脚本调整为：
cd %WORKSPACE%
rd /s /q node_modules
npm install --registry=https://registry.npmmirror.com
npm run build:prod
点击「增加构建步骤」→「执行 shell」（Linux 服务器）：
cd $WORKSPACE
# 清除旧依赖
rm -rf node_modules
# 安装依赖（推荐用 npm 或 yarn，根据项目选择）
npm install --registry=https://registry.npmmirror.com
# 用淘宝源加速
# 打包（生产环境）
npm run build:prod
# 检查打包是否成功
if [ ! -d "dist" ]; then
echo "打包失败，dist 目录不存在！"
exit 1
fi
dist/**）dist（去掉外层目录，只推送里面的文件）/usr/local/nginx/html/frontend）「Exec command」（可选，部署后重启 Nginx）：
# 重启 Nginx（根据实际路径调整）
/usr/local/nginx/sbin/nginx -s reload
# 或刷新权限
chmod -R 755 /usr/local/nginx/html/frontend
jenkins）需有访问 Nginx 部署目录的权限，或部署脚本中添加 chmod 命令。这套流程适配绝大多数前端项目（Vue/React/Angular），只需调整打包脚本（如 npm run build）即可复用。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online