Vite 项目使用 Vercel 自动化部署完整流程

本地准备

1. 安装 Node.js（LTS 版本）

	node -vnpm -v

2. 创建 Vite 项目

	npm create vite@latest my-vite-appcd my-vite-appnpm installnpm run dev   # 本地测试

3. 初始化 Git 仓库

git init
git add .
git commit -m "init vite project"

配置 SSH 推送到 GitHub（避免 HTTPS 网络问题）

推荐SSH方式

1. 生成 SSH Key（如果没有）

ssh-keygen -t ed25519 -C "你的邮箱"

2. 启动 ssh-agent 并添加私钥（Git Bash 下）

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

3. 复制公钥到 GitHub

cat ~/.ssh/id_ed25519.pub

示例:

4. 修改远程仓库为 SSH

git remote add origin [e-mail]:你的用户名/my-vite-app.git
git push -u origin main

Vercel 自动部署步骤

1. 注册/登录 Vercel（建议 GitHub 登录）

2. 点击 “New Project” → 选择你的 GitHub 仓库

3. 配置构建信息：

   • Framework：Vite（Vercel 会自动识别）
   • Build Command：npm run build
   • Output Directory：dist

4. 点击 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)vGitHub 仓库更新|| webhook 通知vVercel 自动拉取代码|| npm install + npm run buildv自动部署上线|v
访问网站： https://xxx.vercel.app;

最后

恭喜！，这样你就完整掌握了 Vite + GitHub + Vercel 自动化部署 的流程，并且知道可能踩坑的点。