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 腳本 – 將它們新增至
prepare.scripts
模組配置。
💻 開發
- Clone 這個儲存庫
- 使用
corepack enable
啟用 Corepack - 使用
pnpm install
安裝依賴套件 - 執行
pnpm run dev:prepare
- 使用
pnpm run dev
啟動開發伺服器
致謝
- Maronbeere 感謝他的變色龍像素藝術。
- McPizza0 感謝他的啟發性
nuxt-server-init
模組。
許可證
MIT 許可證 © 2023-至今 Johann Schopplich