VUP

简体中文

English

简体中文

English

Appearance

Vercel 部署指南 ​

Vercel 是一个现代化的前端部署平台，支持多种框架和静态站点。本指南将详细介绍如何将 VUP 项目部署到 Vercel。

什么是 Vercel ​

Vercel 是由 Next.js 团队开发的云平台，提供：

  • 零配置部署 - 自动检测框架并配置构建
  • 全球 CDN - 内容分发网络，确保全球访问速度
  • 自动 HTTPS - 免费 SSL 证书
  • 预览部署 - 每个 PR 自动生成预览链接
  • 环境变量管理 - 安全的配置管理
  • 自定义域名 - 支持绑定自己的域名

支持的框架 ​

Vercel 原生支持以下框架：

  • Next.js - React 全栈框架
  • Nuxt.js - Vue 全栈框架
  • VitePress - Vue 静态站点生成器
  • Vite - 现代化构建工具
  • SvelteKit - Svelte 全栈框架
  • Astro - 多框架静态站点生成器
  • Remix - React 全栈框架

快速开始 ​

VUP 项目已经预配置了 Vercel 部署，开箱即用：

1. 登录 Vercel ​

bash
# 登录 Vercel 账户
vercel login

2. 部署项目 ​

bash
# 预览部署
pnpm deploy:preview

# 生产部署
pnpm deploy:prod

项目配置 ​

vercel.json 配置 ​

项目根目录已包含 vercel.json 配置文件：

json
{
  "version": 2,
  "builds": [
    {
      "src": "apps/homepage/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "apps/homepage/.output"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/apps/homepage/.output/$1"
    }
  ]
}

环境变量配置 ​

在 Vercel 控制台或使用 CLI 设置环境变量：

bash
# 设置环境变量
vercel env add NODE_ENV production
vercel env add API_URL https://api.example.com

# 查看环境变量
vercel env ls

不同模板的部署 ​

Vue SPA 部署 ​

json
{
  "version": 2,
  "builds": [
    {
      "src": "apps/vue-app/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "apps/vue-app/dist"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/apps/vue-app/dist/$1"
    }
  ]
}

Nuxt.js 部署 ​

json
{
  "version": 2,
  "builds": [
    {
      "src": "apps/nuxt-app/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "apps/nuxt-app/.output"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/apps/nuxt-app/.output/$1"
    }
  ]
}

VitePress 部署 ​

json
{
  "version": 2,
  "builds": [
    {
      "src": "apps/docs/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "apps/docs/.vitepress/dist"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/apps/docs/.vitepress/dist/$1"
    }
  ]
}

NestJS API 部署 ​

json
{
  "version": 2,
  "builds": [
    {
      "src": "apps/api/package.json",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/apps/api/dist/main.js"
    }
  ]
}

环境变量 ​

开发环境变量 ​

创建 .env.local 文件：

bash
# .env.local
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

生产环境变量 ​

在 Vercel 控制台设置：

  1. 进入项目设置
  2. 选择 "Environment Variables"
  3. 添加变量并选择环境
bash
# 使用 CLI 设置
vercel env add VITE_API_URL production
vercel env add VITE_APP_TITLE production

自定义域名 ​

添加域名 ​

  1. 在 Vercel 控制台进入项目
  2. 选择 "Settings" > "Domains"
  3. 添加自定义域名
  4. 配置 DNS 记录

DNS 配置 ​

bash
# A 记录指向 Vercel
Type: A
Name: @
Value: 76.76.19.61

# CNAME 记录指向 Vercel
Type: CNAME
Name: www
Value: cname.vercel-dns.com

预览部署 ​

自动预览 ​

每次推送到分支时自动生成预览：

bash
# 推送到分支
git push origin feature-branch

# Vercel 自动生成预览链接
# 例如：https://my-app-git-feature-branch.vercel.app

手动预览 ​

bash
# 创建预览部署
pnpm deploy:preview

# 部署到生产环境
pnpm deploy

性能优化 ​

图片优化 ​

Vercel 自动优化图片：

html
<!-- 自动优化 -->
<img src="/image.jpg" alt="Description" />

<!-- 使用 Vercel Image Optimization -->
<img src="/image.jpg" alt="Description" width="800" height="600" />

缓存配置 ​

json
{
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

压缩配置 ​

json
{
  "functions": {
    "apps/api/dist/main.js": {
      "maxDuration": 10
    }
  }
}

监控和分析 ​

性能监控 ​

Vercel 提供内置的性能监控：

  • Core Web Vitals - 核心网页指标
  • Real User Monitoring - 真实用户监控
  • Serverless Function Analytics - 函数分析

访问分析 ​

bash
# 查看部署分析
vercel logs

# 查看函数日志
vercel logs --follow

常见问题 ​

构建失败 ​

问题: 构建过程中出现错误

解决方案:

  1. 检查 package.json 中的构建脚本
  2. 确保所有依赖都已安装
  3. 检查环境变量配置
  4. 查看构建日志
bash
# 查看详细构建日志
vercel logs --build

路由问题 ​

问题: 页面刷新后出现 404

解决方案: 配置重写规则

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

环境变量问题 ​

问题: 环境变量未生效

解决方案:

  1. 确保变量名以 VITE_ 开头（Vite 项目）
  2. 重新部署项目
  3. 检查变量值是否正确

构建超时 ​

问题: 构建时间过长导致超时

解决方案:

  1. 优化构建脚本
  2. 减少依赖包大小
  3. 使用构建缓存

最佳实践 ​

1. 项目结构 ​

my-project/
├── apps/
│   ├── web/          # 前端应用
│   ├── api/          # API 服务
│   └── docs/         # 文档站点
├── vercel.json       # Vercel 配置
└── package.json      # 根配置

2. 环境管理 ​

  • 使用 .env.local 进行本地开发
  • 在 Vercel 控制台管理生产环境变量
  • 区分开发、预览和生产环境

3. 构建优化 ​

  • 启用构建缓存
  • 使用 CDN 加速静态资源
  • 优化图片和字体加载

4. 安全配置 ​

  • 设置正确的 CORS 策略
  • 使用 HTTPS
  • 配置安全头

相关资源 ​

Copyright © 2025 VUP-CLI