jenkins Vue 项目自动打包 2022-08-12 10:35 • 阅读:次 ### Vue项目 自动构建 #### 新建任务 ![](/uploadfiles/image/202208/28.png) #### Configuration 配置项目 > General ```bash 我这里选择了gitee 也可以设置 github , gitlab或者自己公司的搭建的版本控制器 ``` ![](/uploadfiles/image/202208/29.png) #### 源码管理 ![](/uploadfiles/image/202208/30.png) ``` 选择无也可以选择 其他【我这里选择了无不做源码管理】 ``` #### 构建触发器 ![](/uploadfiles/image/202208/31.png) ![](/uploadfiles/image/202208/32.png) ```bash 这里的密码是要写在gitee webHooks 如下图 ``` ![](/uploadfiles/image/202208/33.png) #### 构建环境 ![](/uploadfiles/image/202208/34.png) #### Build Steps ###### shell 命令 > 第一种【无判断模式】 ```bash cd /path #切换到项目目录 npm install npm run build:prod --report #打包项目 cd dist #切换到打包好的目录文件夹 rm -rf *.tar.gz #删除上次打包生成的压缩文件 tar -zcvf *.tar.gz * cp *.tar.gz /path #复制打包好的包的指定目录 cd /path # 切换到打包好的包的指定目录 tar -xzvf *.tar.gz # 解压 ``` > 第二种【增加判断模式】 ```bash cd /PATH #切换到项目目录 # 检测的文件 package=/PATH/package.json md5=package_json_md5 # 记录 md5值的文件 # 创建新的md5信息 package_md5_new=$(md5sum -b $package | awk '{print $1}'|sed 's/ //g') # 获取旧的md5信息 package_md5_old=$(cat $md5|sed 's/ //g') if [ "$package_md5_new" == "$package_md5_old" ];then echo "md5 is not changed" else echo "md5 is changed" echo $package_md5_new > $md5 # 新的MD5信息写入文件 npm install fi npm run build:prod --report #打包项目 cd dist #切换到打包好的目录文件夹 rm -rf *.tar.gz #删除上次打包生成的压缩文件 tar -zcvf *.tar.gz * .[!.]* cp *.tar.gz /PATH #复制打包好的包的指定目录 cd /PATH # 切换到打包好的包的指定目录 tar -xzvf *.tar.gz # 解压 ``` #### 构建后操作 ``` 选择了企业微信【机器人】通知 ``` ![](/uploadfiles/image/202208/35.png)