👨 作者简介:大家好,我是Taro,全栈领域创作者
✒️ 个人主页:唐璜Taro
🚀 支持我:点赞👍+📝 评论 + ⭐️收藏
文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、背景与痛点
在前端开发中,手动 npm run build 并拷贝文件到服务器既费时又容易出错。本文记录了在 内网 Windows 服务器 环境下,如何利用 Jenkins 实现:一旦 Gitee 仓库有代码推送,服务器自动拉取、打包并部署到 Nginx 目录。
挑战: 内网服务器外网无法访问(无法使用 Webhook),Windows 批处理语法与 Linux 不同,旧版 Vue2 与高版本 Node 的兼容性问题。
二、环境准备
工欲善其事,必先利其器。我们需要在 Windows 服务器上安装:
-
JDK 17/21:运行 Jenkins 的基础。
-
Jenkins:建议安装 LTS 版本。
-
Git for Windows:用于拉取代码。
-
Node.js (v18+):虽然是 Vue2,但为了支持现代构建工具(如 Rollup 的新语法),建议使用 v18 LTS 版本。
三、 核心配置步骤
1. 解决拉取权限:HTTPS 凭据配置
由于内网 SSH 配置较复杂,推荐使用 HTTPS + Gitee 私人令牌(Access Token):
-
在 Gitee 生成私人令牌。
-
在 Jenkins 凭据管理中添加 Username with password,密码处填写令牌。



1.2 安装Gitee插件


2. 实现自动触发:SCM 轮询
针对内网无法接收 Webhook 的问题,采用"主动轮询"方案:
-
在任务的 构建触发器 中勾选 Poll SCM。
-
设置日程表为 * * * * *(每分钟检查一次代码更新)。

- 编写 Windows 自动化脚本
在"构建"步骤中选择 Execute Windows batch command。
注意: Windows 下执行 npm 必须使用 call 关键字,否则脚本会中断。

bash
@echo off
:: 解决 Node 17+ 的 OpenSSL 兼容性问题 (Vue2 必备)
set NODE_OPTIONS=--openssl-legacy-provider
echo [Step 1] 安装依赖...
call npm install --registry=https://registry.npmmirror.com
echo [Step 2] 执行打包...
call npm run build
if %errorlevel% neq 0 exit 1
echo [Step 3] 部署到 Nginx 目录...
if not exist "D:\nginx\html\your-project" mkdir "D:\nginx\html\your-project"
xcopy "dist\*" "D:\nginx\html\your-project\" /s /e /y /i
总结
通过 Jenkins 的自动化改造,我们实现了"开发只管 Push,部署交给 Jenkins"。这不仅提升了开发效率,也规范了测试与生产环境的发布流程。