Jenkins配置vue前端项目(最简单的操作)

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
  1. 问题:

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

    ①首先git/nodejs先要安装好

    ②npm可能识别不了:

    1. 进入 ‌Jenkins → 系统管理 → 系统配置
    2. 找到"全局属性"部分,勾选"环境变量"
    3. 添加环境变量:
      • 名称:Path
      • 值:C:\Program Files\nodejs\;(根据实际安装路径调整)
相关推荐
万少4 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站6 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名9 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫9 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊9 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter9 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折9 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_9 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial9 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu10 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端