Jenkins安装及配置请参考：Jenkins自动化部署springboot+vue应用
vue应用自动化部署原理为：
- jenkins job获取vue应用源代码(git/svn)
- jenkins job执行npm install和npm build 命令打包
- 将生成好的dist目录下文件打压缩包tar.gz
- 通过SSH将项目打包好的压缩文件发送到应用服务器
Jenkins公共配置
1.安装插件
这两个分别用来为vue打包，和将打包好的文件发送的远程应用服务器,安装好这两个插件，要进行配置，参考如下：
-
nodejs，配置两个版本的nodejs备用
nodejs - Publish Over SSH
Publish Over SSH
这里配置应用服务器的SSH账号，注意。
-
Gitee Plugin 和Generic Webhook Trigger Plugin
这两个插件为了实现在代码提交或评论等情况下实现自动任务构建。两者区别：gitee适用于码云仓库，Generic Webhook Trigger Plugin适用于非码云的git仓库；
如果代码仓库是gitee,配置Generic Webhook Trigger Plugin则代码提交时候出显示WebHook请求错误，但点击重拾又会成功，目前还不知道具体原因。
gitee Webhook
Job配置
- 创建一个自由风格的任务
-
填写代码仓库
gitee
填入地址选择好凭证即可。
-
构建触发器
当代码仓库为gitee时候选择如下，记得生成Gitee WebHook 密码（可自动生成）
Gitee webhook
当代码仓库为非gitee时选择如下
Generic Webhook Trigger Plugin -
构建环境,选择nodejs版本
Nodejs -
构建，选择执行shell填写脚本
构建
脚本如下,注意可以使用环境变量JENKINS_HOME 、JOB_NAME:
#进入项目目录，使用环境变量
cd $JENKINS_HOME/workspace/$JOB_NAME
#npm源设置为淘宝源
npm config set registry https://registry.npm.taobao.org
#检测npm是否切换成功
npm config get registry
#安装依赖
npm install
#打包
npm run build
#删除上次打包生成的压缩文件
rm -rf dist.tar.gz
#打包
tar -zcvf dist.tar.gz dist/
-
构建后操作
构建成功后将打包好文件发送到应用服务器，并解压，删除旧文件，实现更新
构建后操作
执行Job
-
点击执行立即构建，查看控制台可观察构建过程
执行job -
实现gitee仓库提交后自动构建
在gitee里进行设置,按照如下图设置填写url及webhook密码，选择事件即可。
在本地Pull一次代码，可以看到jenkins已经实现触发自动构建，也可以从gitee处看到请求历史。
gitee -
查看应用服务器是否完成代码更新，可以看到应用服务器代码文件已经更新
centos server
