🚀 Vercel CLI 完整 Cheatsheet

📋 工具介绍

Vercel 是一个现代化的前端部署平台，专为 React、Next.js、Vue.js 等前端框架优化。Vercel CLI 是其官方命令行工具，让你能够直接从终端部署、管理和监控你的应用。

核心功能：

零配置部署
自动 HTTPS 和 CDN
无服务器函数支持
实时协作和预览

⭐ 核心优势

⚡ 极速部署：从 git push 到线上只需几秒
🌍 全球 CDN：自动优化全球访问速度
🔒 安全第一：自动 HTTPS，内置安全防护
🎯 开发者友好：与 GitHub/GitLab 无缝集成
📊 实时分析：内置性能监控和分析
💰 慷慨免费额度：个人项目完全够用

🎯 适用场景

静态网站：博客、文档站、企业官网
React/Next.js 应用：SPA、SSR、SSG 项目
JAMstack 项目：现代前端架构
原型验证：快速部署 MVP 产品
团队协作：多环境部署和预览

🔧 前提条件

Node.js 14+ 已安装
Git 版本控制基础
Vercel 账号（免费注册）
基本的前端开发知识

⚡ 快速体验（5分钟上手）

# 1. 安装 Vercel CLI
npm i -g vercel

# 2. 登录账号
vercel login

# 3. 进入项目目录
cd my-project

# 4. 一键部署 （远程构建的模式）
vercel

# 5. 生产环境部署
vercel --prod

🛠️ 核心命令

🚀 部署相关

# 部署到预览环境
vercel

# 部署到生产环境
vercel --prod

# 指定项目名称部署
vercel --name my-app

# 强制重新部署
vercel --force

# 部署特定目录
vercel ./dist

🔐 认证管理

# 登录 Vercel
vercel login

# 登出当前账号
vercel logout

# 查看当前用户
vercel whoami

# 切换团队
vercel switch [team-name]

📦 项目管理

# 列出所有项目
vercel ls

# 查看项目详情
vercel inspect [url]

# 删除项目
vercel rm [project-name]

# 链接本地项目到 Vercel
vercel link

# 取消项目链接
vercel unlink

🌐 域名管理

# 列出所有域名
vercel domains ls

# 添加域名
vercel domains add example.com

# 删除域名
vercel domains rm example.com

# 为项目添加域名
vercel alias [deployment-url] example.com

📊 日志和监控

# 查看部署日志
vercel logs [url]

# 实时查看日志
vercel logs [url] --follow

# 查看函数日志
vercel logs [url] --since 1h

🔧 环境变量

# 列出环境变量
vercel env ls

# 添加环境变量
vercel env add [name]

# 删除环境变量
vercel env rm [name]

# 拉取环境变量到本地
vercel env pull .env.local

🏗️ 开发相关

# 本地开发服务器
vercel dev

# 指定端口
vercel dev --listen 8080

# 构建项目
vercel build

⚙️ 配置文件

vercel.json 基础配置

{
  "name": "my-awesome-app",
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

环境变量配置

{
  "env": {
    "API_URL": "https://api.example.com",
    "NODE_ENV": "production"
  },
  "build": {
    "env": {
      "BUILD_TIME": "@now"
    }
  }
}

重定向和重写

{
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.example.com/:path*"
    }
  ]
}

💡 实用技巧

🔄 开发最佳实践

# 使用 Git 分支进行预览部署
git checkout -b feature/new-ui
vercel  # 自动创建预览链接

# 设置自动部署别名
vercel alias set [deployment-url] staging.example.com

# 使用环境变量区分环境
vercel env add NODE_ENV production

🚀 部署优化

# 忽略不必要的文件
echo "node_modules\n.env.local\n.DS_Store" > .vercelignore

# 使用构建缓存加速部署
# 在 vercel.json 中配置
{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node",
      "config": {
        "includeFiles": ["public/**"]
      }
    }
  ]
}

🔍 调试技巧

# 本地模拟 Vercel 环境
vercel dev --debug

# 查看详细部署信息
vercel --debug

# 检查配置文件
vercel inspect --wait

🚨 故障排除

常见问题

Q: 部署失败，提示构建错误

# 检查本地构建
npm run build

# 查看详细错误日志
vercel logs [deployment-url] --since 10m

Q: 环境变量不生效

# 确认环境变量设置
vercel env ls

# 重新拉取环境变量
vercel env pull .env.local

Q: 自定义域名无法访问

# 检查域名配置
vercel domains ls

# 验证 DNS 设置
nslookup your-domain.com

Q: 函数超时

// 在 vercel.json 中增加超时设置
{
  "functions": {
    "app/api/**/*.js": {
      "maxDuration": 30
    }
  }
}

性能优化

# 启用压缩
# vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Encoding",
          "value": "gzip"
        }
      ]
    }
  ]
}

📚 相关资源

官方资源

社区资源

学习资源

💡 小贴士：Vercel 的免费额度对个人开发者非常友好，包括 100GB 带宽和无限静态部署。开始你的第一个部署只需要 vercel 一个命令！

Vercel CLI Cheatsheet