Vue3 工程化实践：一键式 Shell 自动化部署方案
## 直击痛点
在构建VUE项目的过程中,每次打包上云都是一个漫长的等待:
- 手动执行`npm run build`
- 使用远程工具登录服务器
- 进入对于目录,使用`rm -rf`删除旧文件
- 上传新文件
## 核心脚本实现
使用最传统的脚本进行'优雅'的部署,将以上复杂的操作转换成一次双击
在项目根目录下新建`deploy.bat`填充以下内容
``` batch
@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`文件内
经过这样的配置,就彻底解决了本机登录服务器需要输入密码的问题
(千万不要泄露你的私钥噢)