一、
下载Jenkins 二、打开msi文件进行配置
可以看看这位博主的文章 三、下载需要的插件
我下载了 Git plugins、publish over ssh 和publish over ftp
根据上面博主的文章可以做到构建那一步
部署到服务器上的任务就是构建后的操作

在Manage Jenkins中找到 Configure System,配置publish over ssh 和publish over ftp

jenkins vue 判断文件是否更新 jenkins部署vue应用_vue


publish over ftp的配置:

jenkins vue 判断文件是否更新 jenkins部署vue应用_git_02


Name是ftp服务器的名字

Hostname:服务器ip地址

username:用户名

password:密码

点击高级、一般ftp服务器的端口都是21

jenkins vue 判断文件是否更新 jenkins部署vue应用_服务器_03


剩下的不用管

点击Test Configuration 测试连通性

jenkins vue 判断文件是否更新 jenkins部署vue应用_git_04


出现success表示连接成功

但是我在这里出现的问题是:

/是根目录,但是网站的根目录不在这里,一般网站的根目录是/var/www/html/xxxx

但是如果我把remote Directory 改为网站根目录,就无法连通,试过很多别的方法不奏效

所以我就改用ssh部署

jenkins vue 判断文件是否更新 jenkins部署vue应用_服务器_05


这里的passphrase是ssh密匙,如果没有的话,可以去自己的服务器实例上面开通一个

jenkins vue 判断文件是否更新 jenkins部署vue应用_jenkins_06

这里的Name是主机名,我的服务器时腾讯云的,就是实例名称

hostname依然是ip地址,username是用户名,remote Directory是网站的根目录

jenkins vue 判断文件是否更新 jenkins部署vue应用_vue_07


测试连通成功接下来去项目里面配置

jenkins vue 判断文件是否更新 jenkins部署vue应用_根目录_08


source files是源文件

加了**是这个目录下的所有内容(包括目录)

remove prefix是去除dist这个前缀

exec command是上传到服务器上进行的命令,因为我是前端内容,上传过去就好了,所有这里无所谓

点击【高级】

jenkins vue 判断文件是否更新 jenkins部署vue应用_根目录_09


这里有一个空目录,我试了一下,大概的功能就是每一次部署前,把服务器上的多余的、重复的文件清空(非常好用)还有一个问题是更改jenkins的工作空间(workspace),在成功上传服务器之前,我踩过的坑是上传了0个文件,也就是它找不到dist在哪里(我觉得),看了workspace发现是空,所以就要修改项目的workspace。

参考了这篇文章

jenkins vue 判断文件是否更新 jenkins部署vue应用_vue_10


接下来,祝你们感受到SUCCESS的喜悦