用Jenkins构建Vue项目的核心是自动化执行“拉代码→装依赖→打包”三步：先配置Node.js环境并自动安装，再通过HTTPS+Token获取Git仓库代码，接着按系统选择Shell或Bat命令执行npm install和build，最后用Publish Over SSH插件将dist文件推送至Nginx目录。
用 Jenkins 构建 Vue 项目，核心是让服务器自动完成“拉代码 → 装依赖 → 打包”这三步。不依赖人工干预，只要配置对了，点一下“立即构建”或代码一推就跑起来。
基础环境得先配好
Jenkins 本身不带 Node.js，它只是个调度员，真正干活的是 Node 和 npm。所以第一步不是建任务，而是告诉 Jenkins 哪儿找 Node：
- 进 Manage Jenkins → Global Tool Configuration → NodeJS，添加一个 Node 版本（比如 18.20.2 或 16.20.2，后者更稳，尤其在 CentOS 7 这类老系统上）
- 勾选 “Install automatically”，Jenkins 会自己下载安装，不用你手动传包
- 保存后，在具体任务里就能在构建步骤中选择这个 Node 环境
拉代码要能认得仓库
Vue 项目一般放在 Gitee、GitLab 或 GitHub。Jenkins 得有权限去取：
- 推荐用 HTTPS + 个人访问令牌（Token），比 SSH 密钥在内网 Windows 环境下更省事
- 在 Manage Jenkins → Credentials → System → Global credentials 里新增凭据，类型选 “Username with password”，用户名填任意（如 gitee），密码栏贴 Token
- 建任务时，在 “Source Code Management” 选 Git，URL 填仓库地址，Credentials 选刚才加的那个
构建命令得写对平台
构建不是只敲一行 npm run build 就完事，不同系统语法和执行逻辑不一样：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- Linux/macOS 用 “Execute shell”，直接写：
npm install<br>npm run build:prod
- Windows 用 “Execute Windows batch command”，必须加
call，否则脚本中途退出：@echo off<br>call npm install<br>call npm run build:test
- 如果用 Vue CLI 3+，确认
package.json里 build 脚本指向正确环境（比如"build:prod": "vue-cli-service build --mode production"）
构建产物得知道放哪儿
打包完的 dist 文件夹，只是临时存在 Jenkins 工作目录里，不推到 Nginx 目录，线上就看不到：
- 装好 Publish Over SSH 插件，在系统配置里提前加好目标服务器（IP、账号、密钥或密码）
- 在任务的 “Post-build Actions” 里选 “Send build artifacts over SSH”
- 填：Source files 为
dist/**，Remove prefix 填dist，Remote directory 填 Nginx 的 root 路径（如/www/wwwroot/my-vue-app） - 如果用宝塔，确保该目录权限开放（比如
chmod -R 755 /www/wwwroot/my-vue-app），不然推送失败
整个过程没黑魔法，就是把人干的三件事拆解成 Jenkins 能懂的指令。配一次，后面改代码、提 Git，剩下的它全包了。
