Jenkins构建打包部署前端Vue项目至Nginx

一. 安装jenkins

基于Docker+Jenkins实现自动部署SpringBoot+Maven项目-CSDN博客

 二. 安装NodeJs插件并配置

 显示上面两行则表示安装成功, 然后回到首页, 点击’系统管理’->‘全局工具配置’:

配置node.js

三. 创建jenkins项目 

1、创建项目 

 2、配置gitee

 3、配置源码

4、构建环境

选择增加构建步骤->执行shell:

#!/bin/bash
npm -v
npm install
npm run build
rm -rf ./dist.tar.gz
tar -zcvf dist.tar.gz ./dist 

选择增加构建步骤->Send files or execute commands over SSH:

 Exec command 

cd /home/jenkins/vue
rm -rf ./dist
tar -zxvf ./dist.tar.gz ./
cp -a ./dist/* /usr/local/nginx/html
cp dist.tar.gz  dist.tar.gz-`date '+%Y-%m-%d-%H-%M-%S'`
rm -rf ./dist.tar.gz

点击保存, 创建完成!

 四.执行构建

控制台打印如下信息表示执行成功