Vercel 部署指南

Vercel 是前端项目的首选部署平台，特别适合 Next.js、React、Vue 等框架。

为什么选择 Vercel

• 零配置：自动识别框架，无需手动配置
• 自动部署：每次 push 代码自动触发部署
• 预览环境：每个 PR 自动生成预览链接
• 全球 CDN：自动分发到全球节点
• 免费额度：个人项目完全够用

快速部署

方式一：通过 Web 界面（推荐新手）

1. 访问 vercel.com
2. 点击 "Sign Up" 用 GitHub 登录
3. 点击 "Add New..." → "Project"
4. 选择要部署的仓库
5. 点击 "Deploy"

Vercel 会自动：

• 检测框架类型
• 安装依赖
• 执行构建
• 部署到生产环境

方式二：通过 CLI（推荐熟练开发者）

# 安装 Vercel CLI
npm i -g vercel

# 在项目目录执行
vercel

# 首次使用需要登录
# 按提示选择配置，或直接回车使用默认值

配置环境变量

在项目设置中添加环境变量：

1. 进入项目 → Settings → Environment Variables
2. 添加变量名和值
3. 选择环境（Production / Preview / Development）
4. 点击 Save

常见环境变量：

DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.example.com
API_KEY=your_secret_key

自定义域名

1. 进入项目 → Settings → Domains
2. 输入域名（如 example.com）
3. 按提示配置 DNS 记录
4. 等待 DNS 生效（通常几分钟）

Vercel 会自动配置 HTTPS 证书。

常见问题

构建失败

检查：

• package.json 中的构建命令是否正确
• 依赖是否完整（npm install 能否成功）
• Node.js 版本是否兼容

环境变量不生效

• 前端环境变量需要 NEXT_PUBLIC_ 前缀（Next.js）
• 修改环境变量后需要重新部署
• 检查变量是否在正确的环境（Production/Preview）

部署后页面 404

• 检查路由配置
• 确认 vercel.json 配置（如有）
• 查看构建日志

进阶配置

自定义构建命令

创建 vercel.json：

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite"
}

配置重定向

{
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ]
}

免费额度

个人账号免费包含：

• 100 GB 带宽/月
• 无限部署次数
• 自动 HTTPS
• 全球 CDN

超出后按量付费，但对于 MVP 阶段通常不会超。

下一步

• 配置自定义域名
• 设置环境变量
• 配置错误追踪