使用filemanager-webpack-plugin插件将前端的dist目录打包成zip压缩包,省去手动压缩,进一步可以配合 idea 的Cloud Toolkit插件 或者jekenis进行自动化部署(本文不介绍自动化部署)。
步骤:
安装
npm 安装插件
npm install filemanager-webpack-plugin --save-dev
yarn安装
yarn add filemanager-webpack-plugin --dev
配置;
配置文件vue.config.js中新增:
const FileManagerPlugin = require('filemanager-webpack-plugin')
找到webpack配置节点,新增插件配置
new FileManagerPlugin({ //初始化 filemanager-webpack-plugin 插件实例
events: {
onEnd: {
delete: [ //首先需要删除项目根目录下的dist.zip
'./dist.zip',
],
archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
{source: './dist', destination: './dist.zip'},
]
}
}
})
发布脚本:
#!/bin/bash -e
# 替换自己服务器上面存放dist的路径,不包含dist和最后的那个斜杠
localName=/usr/local/nginx/html
vueName=dist.zip
time1=$(date "+%Y%m%d%H%M%S")
source /etc/profile
# 备份原来的dist文件
mv $localName/dist $localName/'dist'$time1
#解压新版本
unzip -d dist $localName/dist.zip
echo "前端项目部署完成"
脚本可配合idea 的插件Cloud Toolkit 或者Cloud Toolkit完成自动部署。