本地准备
- 安装 Node.js（LTS 版本）
node -v
npm -v
- 创建 Vite 项目
npm create vite@latest my-vite-app
cd my-vite-app
npm install
npm run dev # 本地测试
- 初始化 Git 仓库
git init
git add .
git commit -m "init vite project"
配置 SSH 推送到 GitHub（避免 HTTPS 网络问题）
推荐SSH方式
- 生成 SSH Key（如果没有）
ssh-keygen -t ed25519 -C "你的邮箱"
- 启动 ssh-agent 并添加私钥（Git Bash 下）
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519
- 复制公钥到 GitHub
cat ~/.ssh/id_ed25519.pub
示例:
- 修改远程仓库为 SSH
git remote add origin git@github.com:你的用户名/my-vite-app.git
git push -u origin main
Vercel 自动部署步骤
注册/登录 Vercel（建议 GitHub 登录）
点击 “New Project” → 选择你的 GitHub 仓库
配置构建信息：
- Framework：Vite（Vercel 会自动识别）
- Build Command：npm run build
- Output Directory：dist
点击 Deploy → 几分钟后生成访问地址（https://xxx.vercel.app）
自动化效果
- 以后只要在本地
git add .
git commit -m "update"
git push origin main
- Vercel会自动：
- 拉取最新代码
- 执行
npm install+npm run build - 上线更新
- 仪表盘可以看到每次构建日志，方便排查问题。
易错点
| 易错点 | 解决方法 |
|---|---|
| HTTPS push 网络被阻塞 | 使用 SSH 方式 push，保证稳定 |
| SSH Key 格式错误 | 确保公钥为 一整行，以 ssh-ed25519 开头 |
| Vercel Output Directory 配置错误 | Vite 默认输出目录是 dist，不要写错 |
| 构建失败 | 检查本地 npm run build 是否报错，保证本地能构建成功再部署 |
| 分支未对 | 默认部署分支是 main，push 到其他分支可能不触发自动部署 |
| 未同步依赖 | package.json 里依赖要完整，否则 Vercel 构建失败 |
如何插入一段漂亮的代码片
本地 Vite 开发
|
| git push origin main (SSH)
v
GitHub 仓库更新
|
| webhook 通知
v
Vercel 自动拉取代码
|
| npm install + npm run build
v
自动部署上线
|
v
访问网站： https://xxx.vercel.app;
最后
恭喜！，这样你就完整掌握了 Vite + GitHub + Vercel 自动化部署 的流程，并且知道可能踩坑的点。