纯 bash 实现 vue 项目打包发布闭环:①定义环境变量区分 dev/prod;②本地 clean+build+校验 dist;③scp 传压缩包至远程临时目录,ssh 解压并原子替换,可选 reload nginx。

用 Shell 脚本实现 Vue 项目打包后自动构建 + 跨服务器发布,核心在于三步闭环:本地打包 → 文件传输 → 远程部署。不依赖 Jenkins 或 CI 平台,纯 Bash 即可落地,关键是把环境区分、权限打通、路径对齐、错误兜底这四件事做扎实。
明确构建目标与环境变量
先在脚本开头定义可配置项,避免硬编码。不同环境(dev/prod)对应不同构建命令、远程地址和 Nginx 配置路径:
- APP_NAME:项目标识名,用于远程目录和 Nginx 配置文件名
-
BUILD_CMD:如
npm run build:prod或yarn build --mode=production,建议在package.json中预设好带环境变量的 script -
REMOTE_USER/REMOTE_HOST/REMOTE_PATH:SSH 登录信息与目标部署路径(如
/var/www/my-app) - NGINX_CONF:远程 Nginx 配置文件路径,便于后续 reload
本地打包并校验输出
执行构建前清空旧 dist,构建后检查 dist/ 是否存在且非空,防止上传空目录:

