jenkins自动构建发布vue项目的方法步骤

下面是Jenkins自动构建发布Vue项目的方法步骤的完整攻略：

1. 环境准备

在开始构建前，需要确保系统中已经安装好以下环境：

Jenkins 服务端
Node.js 运行环境
Vue CLI 脚手架工具

2. 创建 Jenkins 的 Pipeline

在 Jenkins 的管理界面点击“新建 Item”按钮，选择“Pipeline”类型，设置好名称和描述，并点击“OK”保存。此时会跳转到 Pipeline 的设置界面。

在 Pipeline 的设置界面，选择“Pipeline script”类型，然后将下面的代码粘贴到脚本区域：

pipeline {
    agent any

    stages {
        stage('Checkout') {
            steps {
                checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: 'your-credential-id', url: 'your-git-repository-url']]])
            }
        }
        stage('Install') {
            steps {
                sh 'npm install'
            }
        }
        stage('Build') {
            steps {
                sh 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                sh 'your-deploy-command'
            }
        }
    }

    post {
        always {
            sh 'rm -rf node_modules'
        }
    }
}

在上面的代码中，需要填写自己项目的 Git 仓库地址和 Jenkins 凭证 ID（用于 Jenkins 访问 Git 仓库）以及项目部署命令。

最后点击“保存”按钮保存 Pipeline 的设置。

3. 配置 Jenkins 凭证

在 Jenkins 的管理界面选择“凭证”菜单，然后点击“系统”选项卡，在“全局凭证”区域中点击“添加凭证”按钮。

选择“用户名和密码凭证”类型，填写 Git 用户名和密码，并设置凭证 ID。最后点击“OK”保存。

4. 配置部署命令

在项目的根目录中创建一个“jenkins_deploy.sh”文件，用于编写项目的部署脚本。

例如，以下是一个部署到 Apache 服务器的例子：

#!/bin/bash

echo "部署开始..."

BUILD_DIR='/path/to/your/build/dir'
DEPLOY_DIR='/path/to/your/deploy/dir'

rm -rf $DEPLOY_DIR/*
cp -r $BUILD_DIR/* $DEPLOY_DIR/

echo "部署完成。"

编写完部署脚本后，需要将部署脚本添加到项目的 Git 仓库中（可以在 Jenkins 的 Pipeline 中使用）。

5. 执行自动构建

在 Jenkins 的管理界面选择创建的 Pipeline，然后点击“立即构建”按钮，即可开始自动构建项目。

在构建完成后，将会执行部署脚本，将项目部署到指定的服务器中。

示例说明

示例 1: 默认情况下自动构建 Vue 项目

在这个示例中，我们将演示如何在 Jenkins 中默认情况下自动构建 Vue 项目。首先需要确保已经准备好了系统的 Node.js 和 Vue CLI 环境。

在 Jenkins 中创建一个新的 Pipeline。

在 Pipeline 的设置界面中选择“Pipeline script”类型，然后将下面的代码粘贴到脚本区域：

```groovy
pipeline {
agent any

stages {
    stage('Checkout') {
        steps {
            checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: 'your-credential-id', url: 'your-git-repository-url']]])
        }
    }
    stage('Install') {
        steps {
            sh 'npm install'
        }
    }
    stage('Build') {
        steps {
            sh 'npm run build'
        }
    }
}

post {
    always {
        sh 'rm -rf node_modules'
    }
}

}
```

在上面的代码中，需要填写自己项目的 Git 仓库地址和 Jenkins 凭证 ID（用于 Jenkins 访问 Git 仓库）。
点击“保存”按钮保存 Pipeline 的设置。
在 Jenkins 的管理界面选择创建的 Pipeline，然后点击“立即构建”按钮，即可开始自动构建项目。

示例 2: 在自动构建时添加部署命令

在这个示例中，我们将演示如何在 Jenkins 中添加部署命令用于自动部署 Vue 项目。假设我们的项目需要部署到一个 Apache 服务器上。

在项目的根目录中创建一个“jenkins_deploy.sh”文件，然后将下面的代码粘贴到文件中：

```bash

!/bin/bash

echo "部署开始..."

BUILD_DIR='/path/to/your/build/dir'
DEPLOY_DIR='/path/to/your/deploy/dir'

rm -rf $DEPLOY_DIR/
cp -r $BUILD_DIR/ $DEPLOY_DIR/

echo "部署完成。"
```
编辑“jenkins_deploy.sh”文件中的路径，替换为自己的部署路径。
将“jenkins_deploy.sh”文件添加到项目的 Git 仓库中。
在 Jenkins 中创建一个新的 Pipeline。