Vue3 工程化实践：一键式 Shell 自动化部署方案

直击痛点

在构建VUE项目的过程中,每次打包上云都是一个漫长的等待:

• 手动执行npm run build
• 使用远程工具登录服务器
• 进入对于目录,使用rm -rf删除旧文件
• 上传新文件
  

核心脚本实现

使用最传统的脚本进行'优雅'的部署,将以上复杂的操作转换成一次双击
在项目根目录下新建deploy.bat填充以下内容

@echo off
chcp 65001
setlocal

:: ===== 基础配置区 =======
set SERVER_IP="服务器IP地址"
set SERVER_USER="登录名"
:: 这里的路径需与你的 Nginx 配置中的 root 保持一致
set REMOTE_DIR=/var/www/html
:: =====================

echo [1/3] 开始本地打包构建...
call npm run build

echo [2/3] 清理云端旧文件...
:: 确保部署环境干净，避免旧缓存
ssh %SERVER_USER%@%SERVER_IP% "rm -rf %REMOTE_DIR%/*"

echo [3/3] 正在上传最新静态资源...
:: 将 dist 目录下的所有内容同步到服务器
scp -r dist/* %SERVER_USER%@%SERVER_IP%:%REMOTE_DIR%/

echo ========================================
echo 前端部署完成！
echo ========================================
pause

技术细节

1. 使用SCP递归上传,一行代码完成所有命令

2. 环境变量与路径

将脚本中对应的配置更换成你自己的,双击之后仅需一次输入密码即可实现自动化部署

3.中文乱码问题

脚本顶部chcp 65001就是解决Windows下中文乱码的关键

进阶操作 - 免密登录

1.获取SSH KEY

进入终端执行
ssh-keygen -t ed25519 -C "your_email@example.com"

2.获取公钥内容

进入以下目录
C:\Users\用户名\.ssh
找到id_ed25519.pub文件,将该文件内所有内容粘贴到服务器/root/.ssh/authorized_keys文件内
经过这样的配置,就彻底解决了本机登录服务器需要输入密码的问题
(千万不要泄露你的私钥噢)