Nuxt.js部署到Vercel #

一、Vercel概述 #

Vercel 是 Next.js 团队开发的部署平台，完美支持 Nuxt.js 应用。

1.1 Vercel优势 #

零配置部署：自动检测 Nuxt.js 项目
全球 CDN：边缘网络加速访问
自动 HTTPS：免费 SSL 证书
预览部署：每个 PR 自动生成预览链接
边缘函数：支持服务端渲染

二、准备工作 #

2.1 代码仓库 #

确保代码已推送到 Git 仓库（GitHub、GitLab 或 Bitbucket）。

2.2 Vercel账号 #

访问 vercel.com 注册账号。

2.3 项目配置 #

nuxt.config.ts：

typescript

export default defineNuxtConfig({
  nitro: {
    preset: 'vercel'
  }
})

三、部署步骤 #

3.1 导入项目 #

登录 Vercel Dashboard
点击 “Add New Project”
选择 Git 仓库
导入 Nuxt.js 项目

3.2 配置项目 #

配置项	值
Framework Preset	Nuxt.js
Root Directory	./
Build Command	`npm run build`
Output Directory	`.output/public`

3.3 环境变量 #

在 “Environment Variables” 中添加：

text

NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_SECRET_KEY=your-secret-key

3.4 部署 #

点击 “Deploy” 开始部署。

四、CLI部署 #

4.1 安装Vercel CLI #

bash

npm install -g vercel

4.2 登录 #

bash

vercel login

4.3 部署 #

bash

vercel

4.4 生产部署 #

bash

vercel --prod

五、配置文件 #

5.1 vercel.json #

json

{
  "buildCommand": "npm run build",
  "outputDirectory": ".output/public",
  "framework": "nuxtjs",
  "regions": ["hkg1", "sfo1"],
  "functions": {
    "api/**": {
      "memory": 1024,
      "maxDuration": 10
    }
  }
}

5.2 路由配置 #

json

{
  "rewrites": [
    { "source": "/api/:path*", "destination": "/api/:path*" }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}

六、环境变量 #

6.1 运行时配置 #

nuxt.config.ts：

typescript

export default defineNuxtConfig({
  runtimeConfig: {
    secretKey: process.env.NUXT_SECRET_KEY,
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

6.2 Vercel环境变量 #

在 Vercel Dashboard 中设置：

NUXT_SECRET_KEY：服务端密钥
NUXT_PUBLIC_API_BASE：API 基础 URL
DATABASE_URL：数据库连接字符串

6.3 多环境配置 #

text

Production
├── NUXT_PUBLIC_API_BASE=https://api.example.com
└── NUXT_SECRET_KEY=prod-secret

Preview
├── NUXT_PUBLIC_API_BASE=https://staging-api.example.com
└── NUXT_SECRET_KEY=preview-secret

七、域名配置 #

7.1 添加域名 #

进入项目设置
选择 “Domains”
添加自定义域名

7.2 DNS配置 #

添加 CNAME 记录：

text

www.example.com → cname.vercel-dns.com

7.3 重定向 #

json

{
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ]
}

八、边缘函数 #

8.1 边缘中间件 #

server/middleware/edge.ts：

typescript

export default defineEventHandler((event) => {
  const country = getRequestHeader(event, 'x-vercel-ip-country')
  
  if (country === 'CN') {
    return sendRedirect(event, '/cn')
  }
})

8.2 边缘配置 #

typescript

export default defineNuxtConfig({
  nitro: {
    preset: 'vercel-edge'
  }
})

九、监控与日志 #

9.1 查看日志 #

在 Vercel Dashboard 中查看：

部署日志
函数日志
访问日志

9.2 集成分析 #

typescript

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-analytics'],
  
  googleAnalytics: {
    id: 'G-XXXXXXXXXX'
  }
})

十、最佳实践 #

10.1 缓存策略 #

typescript

export default defineNuxtConfig({
  routeRules: {
    '/': { isr: 3600 },
    '/blog/**': { isr: 86400 },
    '/api/**': { cache: { maxAge: 60 } }
  }
})

10.2 构建优化 #

typescript

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            'vendor': ['vue', 'vue-router']
          }
        }
      }
    }
  }
})

10.3 预览部署 #

每个 Pull Request 自动生成预览链接，便于测试和审查。

十一、常见问题 #

11.1 构建超时 #

增加构建超时时间：

json

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/node",
      "config": {
        "maxLambdaSize": "50mb"
      }
    }
  ]
}

11.2 函数大小限制 #

优化依赖：

typescript

export default defineNuxtConfig({
  nitro: {
    externals: {
      inline: ['vue', 'vue-router']
    }
  }
})

11.3 环境变量未生效 #

确保变量名以 NUXT_ 开头。

十二、总结 #

本章介绍了 Nuxt.js 部署到 Vercel：

Vercel 平台概述
部署步骤和配置
CLI 部署方式
环境变量管理
域名配置
边缘函数
监控与日志

Vercel 是部署 Nuxt.js 应用的首选平台之一，下一章我们将学习 Docker 部署。