前端项目多平台部署：GitHub Pages + Vercel + Cloudflare Pages 实战教程

前言

一个好的部署方案可以让你的博客被更多人访问。今天分享如何将 Vue 3 项目部署到多个平台！

部署平台对比

平台	免费额度	CDN	自动部署	自定义域名
Vercel	100GB 带宽	✅	✅	✅ 免费
Cloudflare Pages	无限	✅	✅	✅ 免费
Netlify	100GB 带宽	✅	✅	✅ 免费
GitHub Pages	1GB	✅	✅	✅ 免费

1. Vercel 部署

配置文件

javascript 复制代码

// vercel.json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" }
      ]
    },
    {
      "source": "/assets/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}

部署步骤

bash 复制代码

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

# 2. 登录
vercel login

# 3. 部署
vercel

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

2. Cloudflare Pages 部署

配置文件

yaml 复制代码

# wrangler.toml
name = "my-blog"
type = "webpack"
compatibility_date = "2022-01-01"

[env.production]
routes = [
  { pattern = "blog.example.com", zone_name = "example.com" }
]

GitHub Actions 自动部署

yaml 复制代码

# .github/workflows/cloudflare-pages.yml
name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        run: npm run build
        
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: my-blog
          directory: dist

3. Netlify 部署

配置文件

toml 复制代码

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[build.environment]
  NODE_VERSION = "18"

部署命令

bash 复制代码

# 1. 安装 Netlify CLI
npm i -g netlify-cli

# 2. 部署
netlify deploy --dir=dist --prod

4. GitHub Pages 部署

GitHub Actions

yaml 复制代码

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        run: npm run build
        env:
          VITE_BASE_URL: '/blog/'
          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

构建脚本优化

json 复制代码

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:vercel": "VITE_BASE_URL=/ vite build",
    "build:github": "VITE_BASE_URL=/blog/ vite build"
  }
}

域名配置

DNS 设置

复制代码

# A 记录（根域名）
@  A  192.0.2.1

# CNAME 记录（子域名）
blog  CNAME  your-site.vercel.app

SSL 证书

所有平台都提供免费的 Let's Encrypt 证书，自动配置。

💡 选择建议

国内访问：推荐 Vercel 或 Cloudflare（速度快）

GitHub 集成：GitHub Pages 最方便

企业项目：推荐 Vercel（功能丰富）
🔗 相关资源

Vercel：vercel.com

Cloudflare：pages.cloudflare.com