使用Jenkins自动化部署vue项目(2.528.2版本)

1、 插件市场安装NodeJS

2、全局工具配置-NodeJS 安装自己需要的版本

3、新建凭证

4、新建item

5、编辑内容

bash 复制代码
pipeline {
    agent any
    
    tools {
        nodejs 'node22' //之前安装node的名称
    }
    
    environment {
        DEPLOY_SERVER = '' //ip地址
        DEPLOY_PORT = '22' //端口
        DEPLOY_USER = 'root' //账号
        DEPLOY_PASSWORD = ''  // 密码
        TARGET_DIR = '/www/dist' //部署的目录
    }
    
    stages {
        stage('Checkout') {
            steps {
                git url: '', //git地址
                     branch: 'temporary', //分支
                     credentialsId: '96a5ad65-5728-47c8-ab12-1588ec7cb6b7' //凭证id
            }
        }
        
        stage('Build Frontend') {
            steps {
                sh '''
                    echo "设置 npm 镜像..."
                    npm config set registry https://registry.npmmirror.com
                    
                    echo "安装依赖..."
                    npm install
                    
                    echo "构建生产版本..."
                    npm run build:prod
                '''
            }
            
            post {
                success {
                    echo "✅ 前端构建成功"
                    sh 'ls -la dist/'
                }
                failure {
                    echo "❌ 前端构建失败"
                }
            }
        }
        
        stage('Deploy to Nginx') {
            steps {
                script {
                    try {
                        echo "🚀 开始部署到 ${DEPLOY_SERVER}"
                        
                        // 1. 清空目标目录
                        sh """
                            sshpass -p ${DEPLOY_PASSWORD} ssh -p ${DEPLOY_PORT} \
                            -o StrictHostKeyChecking=no \
                            -o ConnectTimeout=30 \
                            ${DEPLOY_USER}@${DEPLOY_SERVER} \
                            "rm -rf ${TARGET_DIR}/* && echo '目录清空成功'"
                        """
                        
                        // 2. 检查清空结果
                        sh """
                            sshpass -p ${DEPLOY_PASSWORD} ssh -p ${DEPLOY_PORT} \
                            -o StrictHostKeyChecking=no \
                            ${DEPLOY_USER}@${DEPLOY_SERVER} \
                            "test -z \"\$(ls -A ${TARGET_DIR})\" && echo '目录已完全清空' || echo '警告:目录可能未完全清空'"
                        """
                        
                        // 3. 上传文件
                        sh """
                            echo "上传文件中..."
                            sshpass -p ${DEPLOY_PASSWORD} scp -P ${DEPLOY_PORT} \
                            -o StrictHostKeyChecking=no \
                            -r dist/* \
                            ${DEPLOY_USER}@${DEPLOY_SERVER}:${TARGET_DIR}/
                        """
                        
                        // 4. 验证部署
                        sh """
                            echo "验证部署..."
                            sshpass -p ${DEPLOY_PASSWORD} ssh -p ${DEPLOY_PORT} \
                            -o StrictHostKeyChecking=no \
                            ${DEPLOY_USER}@${DEPLOY_SERVER} \
                            "echo '文件数量:'; find ${TARGET_DIR} -type f | wc -l; echo '目录大小:'; du -sh ${TARGET_DIR}"
                        """
                        
                        echo "✅ 部署完成"
                        
                    } catch (Exception e) {
                        echo "❌ 部署失败: ${e.getMessage()}"
                        currentBuild.result = 'FAILURE'
                        error('部署阶段失败')
                    }
                }
            }
            
            post {
                success {
                    echo "🎉 部署成功完成"
                }
                failure {
                    echo "⚠️ 部署失败"
                }
            }
        }
    }
    
    post {
        always {
            echo "📋 流水线执行完成 - ${currentBuild.result}"
            cleanWs()
        }
    }
}
相关推荐
twc8298 分钟前
打造专属 MCP Server 测试自动化的私有化解决方案
运维·软件测试·人工智能·自动化·mcp server
@yanyu66615 分钟前
04vue3基础
前端·javascript·vue.js
实在智能RPA15 分钟前
实在 Agent 支持哪些企业业务场景的自动化?全行业智能自动化场景深度拆解
java·运维·自动化
Xpower 1716 分钟前
Clawith:开启多智能体协作的新纪元
人工智能·python·语言模型·自动化
SuperEugene28 分钟前
Vue3 Props 传参实战规范:必传校验 + 默认值 + 类型标注,避开 undefined / 类型混用坑|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
柯儿的天空30 分钟前
【OpenClaw 全面解析:从零到精通】第 021 篇:Claw 家族全景——从桌面级到边缘部署的轻量级智能体变体深度解析
gpt·ai作画·自动化·aigc·ai编程·ai写作·agi
Luna-player38 分钟前
npm install vue-awesome-swiper@5.0.1 swiper@7.4.1安装后,我又想全删了,怎么移除
前端·vue.js·npm
隔壁小邓1 小时前
vue如何拆分业务逻辑
前端·javascript·vue.js
SuperEugene1 小时前
Vue3 + Element Plus 表单校验实战:规则复用、自定义校验、提示语统一,告别混乱避坑|表单与表格规范篇
开发语言·前端·javascript·vue.js·前端框架
SuperEugene1 小时前
Vue3 + Element Plus 表格查询规范:条件管理、分页联动 + 避坑,标准化写法|表单与表格规范篇
开发语言·前端·javascript·vue.js·前端框架