Jenkins 是 Devops 神器，本文介绍如何安装和使用 使用 Jenkins + Gitee + Node 自动化部署 Vue项目。
一 准备环境
使用 Node.js 官方提供的 CentOS 7 兼容版本
1.1 卸载当前版本
bash
rm -rf /usr/local/bin/node /usr/local/bin/npm /usr/local/lib/node_modules1.2 下载兼容CentOS7的 Node.js 版本
bash
# 下载 Node.js v16.20.2（x64）
wget https://nodejs.org/dist/v16.20.2/node-v16.20.2-linux-x64.tar.xz
# 解压到 /usr/local
sudo tar -xJf node-v16.20.2-linux-x64.tar.xz -C /usr/local --strip-components=11.3 验证是否能运行
bash
/usr/local/bin/node -v # 应输出 v16.20.2
/usr/local/bin/npm -v # 应输出 8.19.4
# 检查文件是否存在
ls -l /usr/local/bin/node
# 检查权限（应为 r-x 对 others）
# 示例：-rwxr-xr-x 1 root root ... /usr/local/bin/node
# 如果权限不足，修复：
sudo chmod a+rx /usr/local/bin/node
sudo chmod a+rx /usr/local/bin/npm
# 测试命令
/usr/local/bin/node -v二 Jenkins 插件安装和全局环境配置
2.1 插件安装
有很多插件都是选择的默认的安装的，所以现在需要我们安装的插件不多，Git plugin 和 Maven Integration plugin、publish over SSH、Deploy to container、Subversion、NodeJS Plugin。
NodeJS Plugin是部署前端项目的关键插件。
插件安装：系统管理 > 插件管理 > 可选插件,勾选需要安装的插件，点击直接安装或者下载重启后安装。
2.2 全局安全配置
管理Jenkins > 配置全局安全性 > 可选插件,勾选需要安装的插件，点击直接安装或者下载重启后安装。
三 部署项目
3.1 新建
首页点击新建：输入项目名称
下方选择构建一个 自由风格 项3目，点击确定。
勾选丢弃旧的构建，选择是否备份被替换的旧包。我这里选择备份最近的7个
3.2 源码管理
选择 Git，配置 Git 相关信息
3.3 配置触发器
可选，如果不需要可以不配置，该例子是定时轮询方式，10分钟检查一次最新代码，有提交就自动构建。建议定时不要设置太频繁。
3.4 构建vue项目包脚本
bash
#!/bin/bash
set -e
echo "=== 环境检查 ==="
echo "PATH: $PATH"
which node || { echo "❌ node not found"; exit 1; }
node -v
npm -v
echo "=== 进入项目目录 ==="
cd yudao-ui/yudao-ui-admin-vue3 || { echo "❌ 项目目录不存在"; exit 1; }
echo "=== 设置 npm 镜像 ==="
npm config set registry https://registry.npmmirror.com
echo "=== 安装依赖 ==="
pnpm install
echo "=== 执行生产构建 (build:prod) ==="
npm run build:prod
# 验证构建结果
if [ ! -d "dist-prod" ]; then
echo "❌ 构建失败：未生成 dist-prod 目录！"
ls -la
exit 1
fi
echo "✅ 构建成功！输出目录: $(pwd)/dist-prod"3,5 部署Vue脚本
由于前端vue是使用nginx配置部署，需要把vue包拷贝到nginx指定配置目录，备份原来旧的。
bash
#!/bin/bash
# === 部署 yudao-ui 到 /www/wwwroot/wuye/vue ===
TARGET="/www/wwwroot/wuye/vue/dist-prod"
BACKUP_DIR="/www/wwwroot/wuye/vue/dist_backup_$(date +%Y%m%d_%H%M%S)"
# 备份旧版本
if [ -d "$TARGET" ]; then
echo "📦 正在备份旧版本到 $BACKUP_DIR"
mv "$TARGET" "$BACKUP_DIR"
fi
# 获取 Jenkins 工作空间中的 dist-prod 路径
WORKSPACE=$(ls -1d /root/.jenkins/workspace/智慧物业-后端管理前端vue部署)
SOURCE="$WORKSPACE/yudao-ui/yudao-ui-admin-vue3/dist-prod"
echo "🚀 源目录: $SOURCE"
echo "🚚 目标目录: $TARGET"
# 部署
cp -r "$SOURCE" "$TARGET"
# 设置权限
chown -R root:root "$TARGET"
chmod -R 755 "$TARGET"
echo "✅ 部署完成！"