详解jenkins自动化部署vue

详解Jenkins自动化部署Vue的完整攻略

为了实现自动化部署Vue项目，我们需要用到Jenkins这个开源自动化工具，它可以帮助我们在不同的环境中自动构建、测试和部署Vue应用程序。下面是详细的步骤和实例说明：

准备工作

• 安装Jenkins和Node.js
• 安装Vue CLI
• 准备好一个Vue项目

配置Jenkins

1. 安装插件

在Jenkins控制台中，安装以下插件：
- NodeJS Plugin：用于管理Node.js的版本
- Git Plugin：用于从Git中获取代码仓库

2. 配置全局Node.js环境

依次进入Jenkins的控制台 -> 系统管理 -> 全局工具配置，找到NodeJS项，点“添加NodeJS”按钮，根据实际情况填写：
- 名称：自定义名称，比如“nodejs_14”
- 安装方式：选择“自动安装”
- 全局已安装NodeJS版本：选择需要的Node.js版本，比如“14.17.6”

3. 配置Git仓库

在Jenkins控制台中，新建一个“自由风格的项目”，进入项目的配置页面，找到“源代码管理” -> Git，填写以下内容：
- Repository URL：Git仓库地址
- Credentials：填写Git仓库的访问凭证，可以是用户名密码或SSH秘钥等

4. 配置构建步骤

在“构建”选项卡中，添加以下构建步骤：

# 安装依赖
npm install

# 打包
npm run build

在“构建后操作”选项卡中，添加以下步骤：

# 部署
scp -r dist/* 用户名@部署服务器IP地址:/path/to/vue-project/

其中，“scp”是用于将本地文件复制到远程Linux服务器的命令，可以使用其他部署工具。

完成以上配置后，提交代码到Git仓库，Jenkins会在每次代码提交后，自动进行构建、测试和部署，实现自动化部署Vue项目。

示例说明

以下是两个实例说明，分别使用本地构建和Docker构建：

示例1：本地构建

在Jenkins构建步骤中，将打包命令修改为：

npm run build --mode=production

这个命令用于在本地环境中构建Vue应用程序。完成构建后，将dist文件夹中的内容复制到服务器上即可。

示例2：Docker构建

在Jenkins构建步骤中，添加以下构建步骤：

# 使用Docker构建
docker build --build-arg NODE_VERSION=14.17.6 -t vue-project:latest .

# 运行Docker容器
docker run -d -p 8080:80 vue-project:latest

这个命令使用Docker构建Vue项目，并在本地运行Docker容器，实现自动化部署。这种方式可以让每个开发者的构建环境保持一致。