菜园前端
Vercel

Vercel 简介与快速上手

了解 Vercel 是什么、为什么前端都爱用它部署项目，并完成第一个项目的快速上线。

🎯 引言

学完这篇文章，你将明白 Vercel 是什么、它和传统服务器部署有什么区别，并完成一次完整的上线流程：把本地的 Vite 项目推送到 GitHub，再用 Vercel 一键部署，获得一个全世界都能访问的网址。

🧱 什么是 Vercel

Vercel 是一个面向前端项目的部署平台。你可以把它理解成"代客泊车"服务：你只需要把代码交给它（推送到 Git 仓库），构建、上传、域名、HTTPS、全球加速这些琐事它全部帮你搞定。

传统方式上线一个网站，你需要：

  1. 购买一台云服务器；
  2. 安装 Nginx、配置站点目录；
  3. 手动执行 npm run build，把产物上传到服务器；
  4. 申请域名、配置 DNS、申请 SSL 证书……

而用 Vercel，整个流程被压缩成两步：推送代码 → 自动上线。之后每次 git push，网站都会自动重新构建部署。

✨ 为什么选择 Vercel

  • 免费套餐够用：Hobby（个人）套餐免费，学习项目、个人博客随便部署。
  • Git 推送即部署：关联 GitHub 仓库后，每次 push 自动构建上线，无需手动操作。
  • 自动 HTTPS 和全球 CDN：部署完成自带 https:// 和全球加速节点，不用自己申请证书。
  • 预览部署：每个分支、每个 PR 都会生成独立的预览地址，改完先预览再上线。
  • 对前端框架友好：Vite、Vue、React、Nuxt、Next.js 等项目都能自动识别，零配置部署。
Vercel 是 Next.js 背后的公司，但它对 Vue、Vite 等前端技术栈的支持同样出色，本课程全程使用 Vue + Vite 项目演示。

🚀 第一步：准备并推送项目

如果你手上已经有 Stage4 的 Vite 项目，可以直接使用。没有的话，快速创建一个（本课程环境使用 Node.js v22.0.0）：

npm create vite@latest vercel-demo -- --template vue
cd vercel-demo
npm install

按照 Stage1 Git 课程学过的流程，把项目推送到 GitHub：

git init
git add .
git commit -m "init vercel demo"
git remote add origin https://github.com/你的用户名/vercel-demo.git
git push -u origin main
GitHub 仓库需要提前在网页上建好。对 Git 操作不熟悉的同学，可以先回看 Stage1 的 Git 课程。

🛠 第二步：在 Vercel 导入项目

Vercel 控制台的页面会不定期更新，按钮名称和入口位置可能与你看到的略有不同。下面流程仅供参考，核心思路不变——"导入仓库 → 确认配置 → 点击部署"，操作时以官网最新页面为准。
  1. 打开 vercel.com，点击 Sign Up，选择 Continue with GitHub 用 GitHub 账号登录。
  2. 登录后进入控制台（Dashboard），点击 Add New... → Project。
  3. 在仓库列表中找到 vercel-demo，点击 Import。
  4. Vercel 会自动识别出这是一个 Vite 项目，并填好构建命令（npm run build）和输出目录（dist），不需要改任何东西。
  5. 点击 Deploy，等待几十秒。

看到撒花页面就说明部署成功了！点击页面上的预览图或 Domains 里的地址，就能访问你的网站。

🌐 获得一个可访问的网址

部署成功后，Vercel 会免费分配一个默认域名：

https://vercel-demo-xxxx.vercel.app

这个网址全世界都能访问，你可以直接发给朋友分享一下。

更神奇的在后面：现在回到本地修改 src/App.vue 里的标题，提交并推送：

git add .
git commit -m "update title"
git push

push 完成后打开 Vercel 控制台，你会看到一次新的部署正在自动进行，几十秒后刷新网址，新内容就上线了。这就是"推送即部署"。

.vercel.app 默认域名和部分 Vercel 服务在国内网络环境下访问可能不稳定。学习阶段不受影响，正式商用项目建议绑定自定义域名并评估访问情况，第五篇会专门讲域名。

🧾 小节总结

  • Vercel 是面向前端的部署平台，负责构建、托管、域名、HTTPS、CDN 等全部上线琐事。
  • 核心工作流：代码推送到 Git 仓库 → Vercel 自动构建 → 自动上线。
  • Hobby 套餐免费，自带 xxx.vercel.app 域名和 HTTPS。
  • Vite 项目能被自动识别，导入后零配置部署。
  • 每次 git push 都会触发一次新的自动部署。

❓ 知识问答

Q1：Vercel 和 GitHub Pages 有什么区别？

A：GitHub Pages 只能托管纯静态文件，构建要自己想办法；Vercel 会自动执行 npm run build，还支持预览部署、Serverless 函数等能力，更适合现代前端项目。

Q2：免费的 Hobby 套餐有什么限制？

A：主要用于个人非商业项目，带宽和构建次数有额度限制，但学习项目完全够用。超出后升级 Pro 套餐即可。

Q3：私有仓库可以部署吗？

A：可以。Vercel 关联 GitHub 账号后，授权范围内的私有仓库一样能导入部署。

Q4：部署失败怎么办？

A：在控制台点开这次部署，查看 Build Logs（构建日志）。最常见的原因是代码本身构建就报错，先在本地确保 npm run build 能成功再推送。

🧪 小练习

  1. 创建一个新的 Vite 项目（或使用已有项目），推送到 GitHub 并在 Vercel 完成首次部署，把获得的 .vercel.app 网址发给朋友访问。
  2. 修改首页文字后再次 git push，在控制台观察自动部署过程，并确认线上内容已更新。

🎉 恭喜你已经完成了第一次 Vercel 部署！下一篇我们学习 Vercel CLI，不用打开网页，在终端里一条命令就能上线。

手写迷你虚拟 DOM

综合运用整门课程的知识，分五个小步骤手写一个迷你虚拟 DOM，每一步都能立即看到效果。

Vercel CLI

学会安装和使用 Vercel CLI，在终端里一条命令把本地项目部署上线。