Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12-13 日。

prepare
nuxt-prepare

构建时期的初始化步骤 - 类似于 Nuxt 2 服务器初始化

Nuxt Prepare module

Nuxt Prepare

Nuxt 模块,用于在构建时运行异步初始化步骤。

特性

  • 🦦 零配置
  • 🦎 在 Nuxt 构建您的应用程序时运行同步或异步操作
  • ✂️ 有条件地覆盖运行时配置或应用程序配置值
  • 🍡 按顺序或并行运行脚本
  • 🦾 使用 defineNuxtPrepareHandler 提升开发体验

设置

!TIP📖 阅读文档

npx nuxi@latest module add prepare

基本用法

!TIP📖 阅读文档

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'
    }
  }
})

!TIP 您可以运行任意数量的准备脚本 - 将它们添加到 prepare.scripts 模块配置中。

💻 开发

  1. 克隆此仓库
  2. 使用 corepack enable 启用 Corepack
  3. 使用 pnpm install 安装依赖项
  4. 运行 pnpm run dev:prepare
  5. 使用 pnpm run dev 启动开发服务器

鸣谢

许可证

MIT 许可证 © 2023-PRESENT Johann Schopplich