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 加速，是个人项目和团队协作的理想选择。

贡献者: paiad