Question

Nuxt 3 提供了 app.config 文件来公开应用程序中的响应式配置。

Nuxt 3 提供了一个 app.config 配置文件来公开应用程序中的反应式配置，能够在生命周期内的运行时更新它，或者使用 nuxt 插件并使用 HMR（热模块替换）对其进行编辑。

您可以使用 app.config.ts 文件轻松提供运行时应用程序配置。 它可以具有“.ts”、“.js”或“.mjs”中的任何一个扩展名。

app.config.ts

export default defineAppConfig({
  foo: 'bar'
})

不要在 app.config 文件中放置任何秘密值。 它暴露给用户客户端包。

定义应用配置

要向应用程序的其余部分公开配置和环境变量，您需要在 app.config 文件中定义配置。

示例:

app.config.ts

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

在将 theme 添加到 app.config 时，Nuxt 使用 Vite 或 webpack 来打包代码。 我们可以在服务器渲染页面时和在浏览器中使用 useAppConfig 可组合访问 theme。

js

const appConfig = useAppConfig()

console.log(appConfig.theme)

手动输入应用程序配置

Nuxt 尝试从提供的应用程序配置自动生成 TypeScript 接口。

也可以手动输入应用程序配置。 您可能想要键入两种可能的内容。

键入应用程序配置输入

AppConfigInput 可能被模块作者使用，他们在设置应用程序配置时声明有效的_input_选项。 这不会影响 useAppConfig() 的类型。

index.d.ts

declare module 'nuxt/schema' {
  interface AppConfigInput {
    /** Theme configuration */
    theme?: {
      /** Primary app color */
      primaryColor?: string
    }
  }
}

// 确保在扩充类型时导入/导出某些内容始终很重要
export {}

键入应用程序配置输出

如果您想键入调用 useAppConfig() 的结果，那么您将需要扩展 AppConfig。

输入 AppConfig 时要小心，因为您将覆盖 Nuxt 从您实际定义的应用程序配置中推断出的类型。

index.d.ts

declare module 'nuxt/schema' {
  interface AppConfig {
    // 这将完全取代现有的推断“主题”属性
    theme: {
      // 您可能希望键入此值以添加比 Nuxt 可以推断的更多特定类型，
      // 例如字符串文字类型
      primaryColor?: 'red' | 'blue'
    }
  }
}

// 确保在扩充类型时导入/导出某些内容始终很重要
export {}

应用程序配置分层合并策略

Nuxt 对应用程序各层中的AppConfig使用自定义合并策略。 该策略是使用 Function Merger 实现的，它允许为 app.config 中具有数组作为值的每个键定义自定义合并策略 。

函数合并只能在应用程序的基础“app.config”中使用。

以下是如何使用的示例：

layer/app.config.ts

export default defineAppConfig({
  // Default array value
  array: ['hello'],
})

app.config.ts

export default defineAppConfig({
  // 使用合并函数覆盖默认数组值
  array: () => ['bonjour'],
})