使用 Vue & UI Pro 的仪表板模板
部署

Vercel

将您的 Nuxt 应用程序部署到 Vercel 基础设施。

零配置 ✨
与 Vercel 的集成无需配置,了解更多.

使用 Git 部署

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

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

了解有关 Vercel 的 Git 集成 的更多信息。

Vercel 边缘函数

您可以将您的 Nuxt 应用程序直接部署到 Vercel 边缘函数 上。

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

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

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
    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"),
  }
})

自定义构建输出配置

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

模板

Nuxt Vercel ISR

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

Vercel 上的边缘上的 Nuxt

在 Vercel Edge 函数上运行的 Nuxt 应用程序示例。

了解更多

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