jenkins自动化部署vue

1.安装git插件出现图一,输入git克隆地址以及账号密码
jenkins自动化部署vue
2.安装gitlab plugins以及gitlab hook plugins用于管理git push提交后自动构建

jenkins自动化部署vue

注意事项:①.需要在gitlab对应项目setting 下的webhook添加例如下图中的连接,然后输入高级中generate中的token,点击测试,如在jenkins中进行构建即表示成功
jenkins自动化部署vue
jenkins自动化部署vue

3.vue构建环境需要node,所以安装nodej plugins
jenkins自动化部署vue
注意事项:①.安装node成功后需要在全局配置中选择node版本并命名,这样在项目配置中才可以选择
jenkins自动化部署vue
jenkins自动化部署vue

4.构建项目执行shell
echo $PATH
node -v //检查node版本
npm -v //检查npm版本
npm install -g yarn --registry=https://registry.npm.taobao.org //安装yarn
yarn config set registry https://registry.npm.taobao.org -g //配置yarn的淘宝镜像
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
yarn install //安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock
rm -rf dist //如果有dist文件先删除
yarn run build //打包项目
cd dist //打开打包完成后生成的文件
rm -rf vue-mall.tar.gz //如果压缩包存在就删除
tar -zcvf vue-mall.tar.gz * //把当前文件所有内容压缩
cd …/ //打开上一级

5.构建后操作
需要下载Publish over SSH插件在系统配置打开,先配置一个自己需要的服务器
Name自己定义一个服务器名字 Hostname 服务器地址 Username服务器账号名 勾选Use password authentication, or use a different key输入服务器密码
jenkins自动化部署vue

选择服务器
source files //选择文件,这里我填写的是dist底下的所有的压缩包
remogr prefix //忽略路径
remote directory //服务器忽略文件路径
exec command //执行脚本
cd /root/wwwroot //打开文件位置
rm -rf meiba.mumonline.net //删除文件
mkdir meiba.mumonline.net //创建文件
tar -zxvf vue-mall.tar.gz -C meiba.mumonline.net/ //将压缩包所有内容解压后移动到此文件
rm -rf vue-mall.tar.gz //删除压缩包