Jenkins配置vue前端项目（最简单的操作）

多来哈米2025-11-13 10:09

jenkins配置后端项目：https://blog.csdn.net/wujiangbo520/article/details/128602076

一，新建项目

二，配置git

bash 复制代码

@echo off
setlocal

set "APP_NAME=web_lumination"
set "JENKINS_WORKSPACE=C:\workSpace\jenkins\workspace"
set "NGINX_DIR=C:\Program Files\nginx-1.28.0"

echo Starting deployment for %APP_NAME%...

:: 项目构建部分
cd /d "%JENKINS_WORKSPACE%\%APP_NAME%"
call npm install
call npm run build:dev

:: 文件部署部分
set "TARGET_DIR=%NGINX_DIR%\html\%APP_NAME%"
if not exist "%TARGET_DIR%" mkdir "%TARGET_DIR%"
xcopy "dist\*" "%TARGET_DIR%\" /E /Y /I

echo Step 5: Managing Nginx service...
:: 使用更安全的方式重启 Nginx
cd /d "%NGINX_DIR%"

:: 检查 Nginx 是否在运行
tasklist /FI "IMAGENAME eq nginx.exe" 2>NUL | find /I /N "nginx.exe">NUL
if "%ERRORLEVEL%"=="0" (
    echo Nginx is running, sending reload signal...
    nginx -s reload
) else (
    echo Starting Nginx...
    nginx
)

echo.
echo ========================================
echo Deployment completed successfully!
echo ========================================

endlocal

nginx脚本：

XML 复制代码

server {
		listen       5173;
		server_name  localhost;
		
		# 你的 Vue 应用
		location /web_lumination {
			alias   "C:/Program Files/nginx-1.28.0/html/web_lumination";
			index  index.html;
			
			# 支持 Vue Router history 模式
			try_files $uri $uri/ /web_lumination/index.html;
		}
		
		# 可选：默认位置指向你的应用
		location / {
			root   "C:/Program Files/nginx-1.28.0/html/web_lumination";
			index  index.html;
			try_files $uri $uri/ /index.html;
		}
	}

三，执行构建---OKK

问题：

中途遇到了很多问题，最后折腾出来的最简单操作

①首先git/nodejs先要安装好

②npm可能识别不了：
1. 进入 ‌Jenkins → 系统管理 → 系统配置‌
2. 找到"全局属性"部分，勾选"环境变量"
3. 添加环境变量：
  - 名称：Path
  - 值：C:\Program Files\nodejs\;（根据实际安装路径调整）