Nuxt Prepare
Nuxt 模組,用於在構建時執行非同步初始化步驟。
功能
- 🦦 零配置
- 🦎 在 Nuxt 構建你的應用時運行同步或非同步操作
- ✂️ 有條件地覆蓋執行時配置或應用配置值
- 🍡 按順序或並行執行指令碼
- 🥢 適用於 Nitro 伺服器路由
- 🦾 透過
defineNuxtPrepareHandler
提升開發體驗
設定
!提示📖 閱讀文件
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
模組。
許可證
MIT 許可證 © 2023-至今 Johann Schopplich