一：相关技术

1. jenkins maven role权限控制 linux服务器安装

参考博客：https://blog.csdn.net/ssyujay/article/details/81277028

2. jenkins 自动化部署 springboot dubbo 微服务 以及nginx前后端分离静态文件自动部署

参考博客：https://blog.csdn.net/ssyujay/article/details/81292707

二：插件安装

  首先配置vue所需的NodeJs插件

    然后选择所需要的NodeJs版本

 

三：自动化部署vue

    接下来对vue自动部署进行配置

    1. 新建一个任务，任务的类型是“构建一个自由风格的软件项目”

    2. 新建一个任务，任务的类型是“构建一个自由风格的软件项目”

    丢弃旧的构建，节约服务器存储

    对源码进行配置

    构建环境配置为Node

cd /root/.jenkins/workspace/yui-admin-ui/admin
rm -rf dist
npm install
npm run build
cd dist
tar -zcvf admin.tar.gz *

    执行shell命令，先删除之前的打包文件，在进行install编译，然后进行打包，最后对打包后的文件夹进行压缩

**/admin.tar.gz

/admin/dist

 /usr/local/tomcat/yui/save





PRO_DIR="/usr/local/tomcat/yui"
PRO="admin.tar.gz"

rm -rf $PRO_DIR/yui-ui/admin
mkdir $PRO_DIR/yui-ui/admin
tar -zxvf  $PRO_DIR/save/$PRO -C $PRO_DIR/yui-ui/admin/

BAK_DIR="$PRO_DIR/save/bak/$PRO/`date +%Y%m%d`"
mkdir -p $BAK_DIR
 
mv $PRO_DIR/save/$PRO $BAK_DIR/"$PRO"_`date +%H%M%S`

    这里对Jenkins处理后的admin.tar.gz进行上传到目标服务器，删除之前的vue文件，然后对新的vue压缩包进行解压处理，然后备份。

   3. 最后点击构建，vue项目就能够自动化部署了。

    注：由于服务使用了nginx反向代理，所以vue重新部署后，nginx不需要重启。