Vibe Vibe

主题

5.2.4 Vercel 部署实战：海外用户/有域名用户 ​

Vercel 是全球最流行的前端部署平台之一，尤其适合 Next.js、React 等现代前端框架。它的自动检测和部署流程非常智能，几乎不需要任何配置。

中国大陆用户请注意

Vercel 的免费域名 *.vercel.app 在中国大陆无法正常访问。如果你在大陆且没有自定义域名，建议使用 Zeabur（参见 5.2.3）。

本节适合以下读者：

  • 你在海外
  • 你有自己的域名，准备用 Cloudflare 代理
  • 你想了解 Vercel 的使用方法，为将来做准备

Vercel 2025 年 Hobby 计划（免费） ​

资源限制
快速数据传输100GB/月
Edge 请求100 万次/月
CPU 时间4 小时/月
项目数量最多 200 个
每日部署次数100 次
构建时间每次最多 45 分钟

对于个人项目来说，这些额度完全够用。

准备工作 ​

  • [ ] 项目已上传到 GitHub
  • [ ] 有 GitHub 账号
  • [ ] （可选）有自己的域名

Step by Step 操作 ​

Step 1：访问 Vercel 并登录 ​

打开浏览器，访问 vercel.com。

点击右上角的"Sign Up"或"Log In"，选择"Continue with GitHub"。

[配图建议] 画面内容：Vercel 首页，突出 GitHub 登录选项 Prompt：modern landing page illustration, GitHub login button highlighted, dark theme with purple accents, clean design, professional, 8k --ar 16:9

你应该看到：GitHub 授权页面。点击"Authorize Vercel"。

Step 2：进入控制台 ​

登录后，你会看到 Vercel 的 Dashboard。

如果是新用户，页面会引导你创建第一个项目。

Step 3：导入项目 ​

点击"Add New..."按钮，选择"Project"。

或者直接点击"Import Project"。

你应该看到：一个让你选择 Git 仓库的页面。

Step 4：选择仓库 ​

在"Import Git Repository"区域，你会看到你的 GitHub 仓库列表。

如果看不到仓库，点击"Adjust GitHub App Permissions"去授权。

找到你的待办清单项目，点击"Import"。

[配图建议] 画面内容：仓库列表页面，突出 Import 按钮 Prompt：dashboard interface showing repository list, import button highlighted, modern UI design, dark theme, clean layout, 8k --ar 16:9

Step 5：配置项目 ​

Vercel 会自动检测你的项目类型。

对于我们的待办清单（纯 HTML/CSS/JS），通常不需要任何配置。

检查以下设置：

  • Framework Preset：如果是纯 HTML，选择"Other"
  • Root Directory：保持默认（.）
  • Build Command：留空（纯静态项目不需要构建）
  • Output Directory：留空或填 .

你应该看到：配置页面，大部分选项已自动填好。

Step 6：部署 ​

确认配置无误后，点击"Deploy"按钮。

Vercel 会开始构建和部署你的项目。这通常需要 30 秒到 2 分钟。

你应该看到：

  • 实时的构建日志
  • 状态从"Building"变成"Ready"
  • 出现庆祝动画和预览图

Step 7：获得网址 ​

部署成功后，Vercel 会给你一个网址，格式类似：

https://your-project-name.vercel.app

点击这个链接，查看你的网站。

再次提醒

如果你在中国大陆，这个链接可能无法访问。解决方案见 5.2.6 大陆访问解决方案。

成功验证清单 ​

  • [ ] 部署状态显示"Ready"
  • [ ] 点击链接能打开页面（海外访问）
  • [ ] 页面功能正常
  • [ ] 在 Vercel Dashboard 中能看到项目

Vercel 的特色功能 ​

Vercel 有一些很实用的功能，了解一下：

功能说明
Preview Deployments每次 Push 都会生成一个预览链接
自动 HTTPS所有网站自动启用 HTTPS
边缘网络全球 CDN 加速
回滚一键回滚到之前的版本

遇到问题？让 AI 帮你 ​

我在 Vercel 上部署项目时遇到了问题：

[粘贴错误信息]

项目是一个纯 HTML/CSS/JavaScript 的静态网站。
请帮我分析原因。

→ 5.2.5 部署后的实用操作