Nuxt3：构建/生成前仅调用一次queryContent填充Pinia仓库

可行实现位置及具体操作 #

1. Nuxt App插件（服务器端初始化） #

在plugins/目录下创建插件文件，利用服务端钩子仅执行一次配置读取，适用于依赖queryContent解析的场景：

// plugins/load-app-config.ts
import { defineNuxtPlugin } from '#app'
import { useAppConfigStore } from '~/stores/appConfig'

export default defineNuxtPlugin(async () => {
  // 仅在服务端（含nuxt generate预渲染阶段）执行
  if (process.server) {
    const appConfigStore = useAppConfigStore()
    // 避免重复加载
    if (!appConfigStore.config) {
      // 从nuxt-content读取JSON配置
      const config = await queryContent('site-config').findOne()
      appConfigStore.setConfig(config)
    }
  }
})

• 插件在服务启动/预渲染开始时仅执行一次，所有路由复用同一份配置。
• 需确保Pinia store已定义setConfig方法来存储配置。

2. Nitro后端插件（服务启动时一次性读取） #

Nitro是Nuxt 3的后端引擎，其插件在服务启动阶段仅运行一次，适合需要全局复用配置的场景：

// server/plugins/load-config.ts
import { defineNitroPlugin } from 'nitropack'
import { useAppConfigStore } from '~/stores/appConfig'
import { createPinia } from 'pinia'

export default defineNitroPlugin(async () => {
  const pinia = createPinia()
  const appConfigStore = useAppConfigStore(pinia)
  
  if (!appConfigStore.config) {
    const config = await queryContent('site-config').findOne()
    appConfigStore.setConfig(config)
    // 将配置注入到运行时配置，客户端也可直接访问
    useRuntimeConfig().public.siteConfig = config
  }
})

• 无论服务启动还是静态生成，仅执行一次配置读取。
• 配置可通过useRuntimeConfig().public.siteConfig在客户端直接调用。

3. 直接在nuxt.config.ts中读取（纯静态JSON场景） #

如果配置是无需解析的纯JSON文件，可跳过queryContent，直接用Node.js文件系统读取：

// nuxt.config.ts
import fs from 'fs'
import path from 'path'

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      siteConfig: JSON.parse(fs.readFileSync(path.resolve(__dirname, 'content/site-config.json'), 'utf-8'))
    }
  }
})

• 最轻量化的实现，生成阶段仅读取一次文件。
• 客户端可通过useRuntimeConfig().public.siteConfig获取配置，也可在Pinia store初始化时同步该值。

注意事项 #

• 所有方案均确保在nuxt generate时仅执行一次配置读取，避免路由级重复调用。
• 若需在客户端Pinia中使用配置，可在store初始化时从运行时配置同步，或依赖服务端渲染时的状态传递。

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