Vercel是面向前端的现代化云平台，支持零配置部署、全球CDN与预览部署。

快速开始

1. 注册登录

   访问Vercel官网，使用GitHub账号登录

2. 连接仓库

   新建项目，授权并选择GitHub仓库

3. 配置部署

   自动识别框架，或手动配置构建命令

4. 一键部署

   Vercel自动构建并发布到全球CDN

项目配置

构建命令

VuePress

# 安装依赖
pnpm i --frozen-lockfile

# 构建命令
pnpm docs:build

# 输出目录
docs/.vuepress/dist

Vue CLI

# 安装依赖
npm ci

# 构建命令
npm run build

# 输出目录
dist

Vite

# 安装依赖
yarn --frozen-lockfile

# 构建命令
npm run build

# 输出目录
dist

环境变量

# Vue CLI
VUE_APP_API_URL=https://api.example.com

# Vite
VITE_API_URL=https://api.example.com

# 通用
NODE_ENV=production

路由配置

SPA项目

创建 vercel.json：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

注

VuePress是静态站点，无需路由重写配置

自定义域名

在项目Settings → Domains中添加自定义域名，按提示配置DNS解析。

部署特性

• 自动部署：推送到主分支自动部署
• 预览部署：PR自动生成预览链接
• 全球CDN：自动配置全球加速
• HTTPS：自动SSL证书

常见问题

Q: 构建失败

A: 检查package.json脚本，查看构建日志定位错误

Q: 页面404

A: SPA项目需配置vercel.json重写规则

Q: 环境变量不生效

A: 确保前缀正确，在对应环境都已配置

总结

Vercel提供简单高效的前端部署方案，零配置即可享受全球CDN加速，是个人项目和团队协作的理想选择。