Vercel

将您的 Nuxt 应用程序部署到 Vercel 基础设施。
零配置 ✨
与 Vercel 的集成无需任何配置即可实现,了解更多.

使用 Git 部署

  1. 将您的代码推送到您的 git 仓库(GitHub、GitLab、Bitbucket)。
  2. 导入您的项目到 Vercel。
  3. Vercel 会检测到您正在使用 Nitro,并为您的部署启用正确的设置。
  4. 您的应用程序已部署!

在您的项目导入并部署后,所有后续推送到分支的操作都将生成预览部署,并且对生产分支(通常是“main”)所做的所有更改都将导致生产部署.

了解更多关于 Vercel 的Git 集成.

Vercel Edge Functions

可以直接在Vercel Edge Functions.

Vercel Edge Functions 允许您以速度和个性化向网站访问者提供内容。它们默认在全球范围内部署在 Vercel 的 Edge Network 上,使您能够将服务器端逻辑移动到靠近访问者来源的 Edge。Edge Functions 使用 Vercel Edge Runtime,该运行时基于与 Chrome 浏览器使用相同的高性能 V8 JavaScript 和 WebAssembly 引擎构建。通过利用这个小型运行时,Edge Functions 可以比 Serverless Functions 具有更快的冷启动和更高的可扩展性。Edge Functions 在缓存之后运行,并且可以缓存和返回响应。阅读更多

为了启用此目标,请设置以下环境变量

SERVER_PRESET=vercel_edge

或者将构建命令更新为 nuxt build --preset=vercel_edge

Vercel KV 存储

您可以轻松使用Vercel KV 存储Nuxt 服务器存储

在 Unstorage 文档中阅读更多关于 Vercel KV 驱动程序的信息。
  1. 安装 @vercel/kv 依赖项
    终端
    npm i @vercel/kv
    
  2. 更新您的 nuxt.config.ts
    nuxt.config.ts
    export default defineNuxtConfig({
      nitro: {
        storage: {
          data: {
            driver: 'vercelKV'
            /* Vercel KV driver options */
          }
        }
      }
    })
    
您需要设置 KV_REST_API_URLKV_REST_API_TOKEN 环境变量,或者将 urltoken 传递给驱动程序选项。查看驱动程序文档了解更多使用信息。

现在您可以在 server/ 目录中的任何位置访问您的数据存储

server/routes/hello.ts
export default defineEventHandler(async (event) => {
  const dataStorage = useStorage('data');
  await dataStorage.setItem('hello', 'world');

  return {
    hello: await dataStorage.getItem("hello"),
  }
})

自定义构建输出配置

您可以提供额外的构建输出配置使用 nuxt.config.ts 中的 nitro.vercel.config 键。它将与内置自动生成的配置合并。

模板

Nuxt Vercel ISR

一个在 Vercel 上部署的具有混合渲染的 Nuxt 应用程序示例。

Vercel Edge 上的 Nuxt

一个在 Vercel Edge Functions 上运行的 Nuxt 应用程序示例。

了解更多

前往 Nitro 文档 了解更多关于按需增量静态再生或更高级选项的信息。