如何在Nuxt 3启动服务器时一次性获取配置数据？

我正在把Web应用从Nuxt 2迁移到Nuxt 3，我们有配套API负责从数据库获取所有数据。服务器启动时，Nuxt应用需要从该API获取包含启动设置及运行时参数常量的JSON对象，这些值随部署环境变化，仅在API和应用更新重启时变更。我不想在用户每次进入应用时通过插件获取该数据，因为返回结果始终一致。

当前Nuxt 2配置 #

// nuxt.config.js (Nuxt 2)

export default async () => {
   const result = await someAsyncCall()

   return {
      // 实际配置，在此处将result用于运行时参数，通过this.$config暴露
   }
}

根据迁移指南，这种异步配置方式在Nuxt 3中已被弃用，推荐使用Nuxt钩子，但我找不到实现该需求的正确方法。目标是应用启动时仅获取一次该JSON数据，并使其全局可用。我尝试了以下几种方法：

方法1：已弃用的异步配置写法（会两次调用数据） #

// nuxt.config.ts

export default async () => { 
  const result = await someAsyncCall()

  return defineNuxtConfig({
     runtimeConfig:{
        // 在此处使用result
     }
  })
}

方法2：尝试用ready钩子但无法更新运行时配置 #

//nuxt.config.ts

export default defineNuxtConfig({
    runtimeConfig: {
      public: {
         myparam: ''
      }
    },
    hooks: {
      ready: async (nuxt) => { // 不确定部署时是否可用，因为它是构建钩子
        console.log('READY')
        const settings = await getRuntimeConfig()
        nuxt.options.runtimeConfig.public.myparam = settings
      }
    },
})

方法3：尝试导出变量但无法从配置文件导入 #

// nuxt.config.ts

export const settings = {}

export default defineNuxtConfig({
    hooks: {
      ready: async (nuxt) => {
        console.log('READY')
        const _settings = await getRuntimeConfig()
        settings = _settings
      }
    },
})

// myPlugin.ts
import { settings } from 'nuxt.config' // 不允许

export default defineNuxtPlugin(() => {
  return { provide: { settings } }
})

我也查阅了Nuxt官方钩子文档，但似乎没有合适的钩子。请问如何实现这一需求？

要实现应用启动时仅获取一次配置数据并全局可用的需求，可以结合Nuxt 3的nitro:init钩子和全局注入来实现，具体步骤如下：

1. 在Nuxt配置中添加钩子获取数据 #

使用nitro:init钩子（这是服务器启动阶段的钩子，只会执行一次）来获取配置数据，并将其存储到Nitro的App Config中：

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'nitro:init'(nitroApp) {
      // 调用你的API获取配置
      const settings = await someAsyncCall();
      // 将数据存入Nitro的App Config，全局可访问
      nitroApp.appConfig.settings = settings;
    }
  }
})

2. 创建Nuxt插件全局注入配置 #

创建一个插件，将存储在App Config中的配置注入到客户端和服务端的全局上下文：

// plugins/settings.ts
export default defineNuxtPlugin((nuxtApp) => {
  // 从App Config中获取预加载的配置
  const settings = nuxtApp.$nuxtAppConfig.settings;
  
  // 注入到全局，可通过useNuxtApp().$settings访问
  return {
    provide: {
      settings
    }
  };
})

3. 在页面/组件中使用配置 #

现在你可以在任意页面或组件中直接使用：

<template>
  <div>当前环境配置：{{ $settings.env }}</div>
</template>

<script setup>
const { $settings } = useNuxtApp();
// 也可以在脚本中使用
console.log($settings);
</script>

方案说明 #

• nitro:init钩子：在Nitro服务器初始化时执行，仅运行一次，完美匹配"启动时获取一次"的需求，不管是开发环境还是生产部署都有效。
• App Config：Nuxt 3提供的用于存储应用级配置的容器，支持服务端和客户端共享（注意不要存放敏感数据，敏感数据请用Runtime Config的私有部分）。
• 插件注入：确保配置在客户端和服务端都能全局访问，无需每次请求重新获取。

如果需要将配置同步到Runtime Config（比如要在useRuntimeConfig()中访问），也可以在nitro:init钩子中更新：

async 'nitro:init'(nitroApp) {
  const settings = await someAsyncCall();
  nitroApp.appConfig.settings = settings;
  // 更新Runtime Config的公开部分
  nitroApp.options.runtimeConfig.public.settings = settings;
}

之后就可以通过useRuntimeConfig().public.settings访问配置。

内容的提问来源于stack exchange，提问作者Nicolas D