---
title: "5.2.4 Vercel 部署实战"
order: 5
---


![05-advanced_5.2-deployment_5.2.4-vercel.png](/images/Basic/05-advanced_5.2-deployment_5.2.4-vercel.png)
# 5.2.4 Vercel 部署实战：海外用户/有域名用户

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

::: warning 中国大陆用户请注意
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](https://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
```

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

::: warning 再次提醒
如果你在中国大陆，这个链接可能无法访问。解决方案见 [5.2.6 大陆访问解决方案](./5.2.6-china-solution.md)。
:::

## 成功验证清单

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

## Vercel 的特色功能

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

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

## 遇到问题？让 AI 帮你

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

[粘贴错误信息]

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

→ [5.2.5 部署后的实用操作](./5.2.5-after-deploy.md)