Vercel 部署 Nuxt.js (Vue) 实战：SSR / SSG / Nitro 全栈上云指南

# 创建项目
npx nuxi@latest init my-nuxt-app

# 进入目录并安装依赖
cd my-nuxt-app
npm install

# 安装 Vercel 适配器（必须）
npm install -D @nuxtjs/vercel-builder
# 实际 Nuxt Nitro 自带 vercel 预设，通常不需要额外安装

// nuxt.config.ts
export default defineNuxtConfig({
  // 默认开启 SSR
  ssr: true,

  // 静态资源/缓存策略
  routeRules: {
    // 首页 SSR（动态内容）
    '/': { isr: 60 },
    // 博客列表页：ISR 5 分钟刷新一次
    '/blog/**': { isr: 300 },
    // 博客详情页：静态生成 + 按需重新验证
    '/blog/**': { prerender: true, isr: 3600 },
    // 关于页：纯静态，永不重新验证
    '/about': { prerender: true },
    // API 路由：不走缓存
    '/api/**': { cors: true, isr: false },
  },

  nitro: {
    // 显式指定 Vercel 预设
    preset: 'vercel',
    // 为 Vercel Functions 设置内存和超时
    vercel: {
      functions: {
        maxDuration: 10, // 函数最大执行时间（秒）
      },
    },
  },

  // 开发服务器代理（本地开发用）
  devtools: { enabled: true },
  compatibilityDate: '2025-01-01',
});

// server/api/hello.get.ts
export default defineEventHandler((event) => {
  return {
    message: 'Hello from Nuxt on Vercel!',
    timestamp: new Date().toISOString(),
  };
});

// server/api/users/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');

  // 这里可以查询数据库
  // const user = await db.findUserById(id);

  return {
    id,
    name: `User ${id}`,
  };
});

// server/utils/prisma.ts
import { PrismaClient } from '@prisma/client';

const globalForPrisma = globalThis as { prisma?: PrismaClient };
export const prisma = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

// server/api/posts/index.get.ts
import { prisma } from '~/server/utils/prisma';

export default defineEventHandler(async () => {
  const posts = await prisma.post.findMany({
    orderBy: { createdAt: 'desc' },
    take: 20,
  });
  return posts;
});

// server/api/upload.post.ts
export default defineEventHandler(async (event) => {
  // 查询参数：?category=tech
  const query = getQuery(event);
  const category = query.category as string;

  // 请求体（JSON）
  const body = await readBody(event);

  // 表单数据
  const formData = await readMultipartFormData(event);

  return { category, body };
});

NUXT_DATABASE_URL="postgresql://user:pass@host:5432/db"
NUXT_API_SECRET="your-secret-key"
NUXT_PUBLIC_APP_NAME="My Nuxt App"

// 服务端（Server Route、SSR 组件）
const config = useRuntimeConfig();
console.log(config.databaseUrl);     // 服务端私有
console.log(config.public.appName);  // 客户端也可访问

<!-- 客户端组件 -->
<template>
  <h1>{{ appName }}</h1>
</template>

<script setup>
const appName = useRuntimeConfig().public.appName;
</script>

git init
git add .
git commit -m "Init Nuxt project"
git remote add origin https://github.com/yourname/my-nuxt-app.git
git push -u origin main

# 安装 Vercel CLI
npm i -g vercel

# 登录
vercel login

# 在项目根目录执行
vercel

# 首次会提示配置，后续推送自动部署
# 部署到生产环境
vercel --prod

# 测试首页
curl https://my-nuxt-app.vercel.app

# 测试 API
curl https://my-nuxt-app.vercel.app/api/hello

# 测试带参数 API
curl https://my-nuxt-app.vercel.app/api/users/123

npm install -D @nuxt/image

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    domains: ['cdn.yourdomain.com'],
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
    },
  },
});

<!-- 自动响应式图片 -->
<NuxtImg
  src="/hero.jpg"
  alt="Hero"
  sizes="xs:100vw sm:50vw md:400px"
  loading="lazy"
  placeholder
/>

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_nuxt/**': {
        headers: {
          'cache-control': 'public, max-age=31536000, immutable',
        },
      },
      '/images/**': {
        headers: {
          'cache-control': 'public, max-age=604800',
        },
      },
    },
  },
});

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 首页：ISR 60 秒
    '/': { isr: 60 },

    // 内容页：ISR 1 小时
    '/posts/**': { isr: 3600 },

    // 用户页：SSR（不缓存）
    '/user/**': { isr: false },

    // API：CORS + 不缓存
    '/api/**': { isr: false, cors: true },
  },
});

// server/api/revalidate.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const { path, token } = body;

  // 校验密钥
  const config = useRuntimeConfig();
  if (token !== config.revalidateToken) {
    throw createError({ statusCode: 401, statusMessage: 'Invalid token' });
  }

  // 触发重新验证
  const nitro = useNitroApp();
  await nitio.hooks.callHook(' nitro:cache:invalidate', { path });

  return { revalidated: true };
});

curl -X POST https://my-nuxt-app.vercel.app/api/revalidate \
  -H "Content-Type: application/json" \
  -d '{"path": "/posts/hello-world", "token": "your-secret"}'

// package.json
{
  "scripts": {
    "build": "prisma generate && nuxt build",
    "postinstall": "prisma generate"
  }
}

# 安装 Vercel Analytics
npm install -D @vercel/analytics

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/analytics.client.ts', mode: 'client' },
  ],
});

// plugins/analytics.client.ts
import { inject } from '@vercel/analytics';

export default defineNuxtPlugin(() => {
  inject();
});

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/**': {
        headers: {
          'X-Frame-Options': 'DENY',
          'X-Content-Type-Options': 'nosniff',
          'Referrer-Policy': 'strict-origin-when-cross-origin',
          'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-inline'",
        },
      },
    },
  },
});