Shell脚本实战怎么实现前端Vue项目打包后的自动化构建与跨服务器发布部署

酷墨姑娘_3845

酷墨姑娘_3845

2026-08-07

861人浏览

原创

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

shell脚本实战怎么实现前端vue项目打包后的自动化构建与跨服务器发布部署

用 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/ 是否存在且非空,防止上传空目录:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
尚观shell视频教程
尚观shell视频教程

共8课时 | 1.9万人学习

Linux开发视频教程
Linux开发视频教程

共18课时 | 4.6万人学习

Perl 入门教程
Perl 入门教程

共29课时 | 31.3万人学习