Nuxt Prepare

Nuxt 模組，用於在建置時執行非同步初始化步驟。

功能

🦦 零配置
🦎 在 Nuxt 建置您的應用程式時執行同步或非同步操作
✂️ 有條件地覆寫執行階段配置或應用程式配置值
🍡 依序或並行執行腳本
🥢 適用於 Nitro 伺服器路由
🦾 透過 defineNuxtPrepareHandler 提升開發體驗 (DX)

設定

!提示📖 閱讀文件

npx nuxi@latest module add prepare

基本用法

!提示📖 閱讀文件

將 nuxt-prepare 模組新增至您的 nuxt.config.ts

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-prepare']
})

預設情況下，Nuxt Prepare 將會在您的專案根目錄中尋找 server.prepare.ts 檔案。若要在 Nuxt 建置您的應用程式時執行同步或非同步程式碼，請在您的專案根目錄中定義一個處理程序並匯出一個預設函式

// `server.prepare.ts`
import { defineNuxtPrepareHandler } from 'nuxt-prepare/config'

export default defineNuxtPrepareHandler(async () => {
  // Do some async magic here, e.g. fetch data from an API

  return {
    // Overwrite the runtime config variable `foo`
    runtimeConfig: {
      public: {
        foo: 'Overwritten by "server.prepare" script'
      }
    },

    // Pass custom state to Nuxt and import it
    // anywhere from `#nuxt-prepare`
    state: {
      foo: 'bar'
    }
  }
})

!提示您可以執行任意數量的準備腳本 – 將它們新增至 prepare.scripts 模組配置中。

💻 開發

複製此儲存庫
使用 corepack enable 啟用 Corepack
使用 pnpm install 安裝依賴項
執行 pnpm run dev:prepare
使用 pnpm run dev 啟動開發伺服器

鳴謝

Maronbeere 的變色龍像素藝術。
McPizza0 及其啟發性的 nuxt-server-init 模組。

nuxt-prepare

Nuxt Prepare

功能

設定

基本用法

💻 開發

鳴謝

許可證