基本配置

• 项目名称：默认为仓库名称，可自定义
• 团队选择：个人账号或团队（免费计划只能使用个人账号）
• 框架预设：Vercel 会自动检测框架，通常无需修改

构建和输出设置

对于需要构建的项目（如 React、Vue 等），需要配置：

# 常见框架的构建命令示例
Next.js: 无需配置（自动检测）
React: npm run build
Vue: npm run build
Angular: npm run build --prod

• 构建命令：项目构建的命令
• 输出目录：构建结果的目录（如 dist、build）
• 安装命令：依赖安装命令（通常是 npm install）

环境变量

对于需要环境变量的项目（如 API 密钥、后端地址等）：

1. 点击 "Environment Variables" 部分的 "Add" 按钮
2. 输入变量名和值（如 API_KEY=your_key）
3. 对于敏感信息，勾选 "Secret" 选项
4. 可以为不同环境（开发、预览、生产）设置不同的值

完成部署

配置完成后，点击 "Deploy" 按钮开始部署过程：

• Vercel 会自动克隆代码、安装依赖、构建项目
• 部署完成后，会显示项目的 URL（通常是 project-name.vercel.app）
• 点击 URL 即可访问你的应用

添加自定义域名

1. 在项目控制台中，点击 "Settings" 选项卡
2. 选择左侧菜单中的 "Domains"
3. 在输入框中输入你的域名（如 example.com），点击 "Add"
4. Vercel 会验证域名所有权并提供 DNS 配置说明

DNS 配置

根据你的域名注册商，需要添加以下 DNS 记录：

具体的 IP 地址可能会变化，请参考 Vercel 提供的最新配置信息。

HTTPS 配置

配置域名后，Vercel 会自动处理 HTTPS：

• 自动生成和配置 SSL 证书
• 默认启用 HTTP 到 HTTPS 的重定向
• 证书会自动续期，无需手动管理

证书配置可能需要几分钟到几小时，请耐心等待 DNS 记录生效。

预览部署

利用 Vercel 的预览部署功能，在合并代码前测试更改：

• 向你的仓库提交 Pull Request
• Vercel 会自动创建一个预览部署
• 在 PR 评论中会显示预览链接
• 团队成员可以在合并前测试新功能

Serverless Functions

创建无服务器函数处理后端逻辑：

# 在项目根目录创建 api 文件夹
mkdir api

# 创建一个简单的 API 端点
# api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel!' })
}

部署后，可以通过以下 URL 访问：

https://your-project.vercel.app/api/hello

分析和监控

监控项目性能和使用情况：

• 在项目控制台的 "Analytics" 查看访问统计
• 查看函数执行时间和资源使用情况
• 设置警报，当超出免费配额时收到通知
• 分析页面性能和加载时间

集成和自动化

扩展 Vercel 功能的集成选项：

• 与 Slack、Discord 集成，接收部署通知
• 使用 Webhook 触发自定义工作流
• 集成内容管理系统（CMS）如 Contentful、Sanity
• 连接数据库服务如 Supabase、Firebase