透過 100 多個技巧的集合來學習 Nuxt!
部署

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

自訂建置輸出配置

您可以使用 nuxt.config 內的 nitro.vercel.config 金鑰,提供額外的建置輸出配置。它將與內建的自動產生配置合併。

範本

Nuxt Vercel ISR

在 Vercel 上部署具有混合渲染的 Nuxt 應用程式範例。

Vercel 邊緣上的 Nuxt

在 Vercel 邊緣函式上執行的 Nuxt 應用程式範例。

了解更多

前往Nitro 文件,以了解更多關於隨選增量靜態重新產生或更進階選項的資訊。