Nuxt 3 提供了一个 app.config 配置文件来公开应用程序中的反应式配置，能够在生命周期内的运行时更新它，或者使用 nuxt 插件并使用 HMR(热模块替换)对其进行编辑。
您可以使用 app.config.ts 文件轻松提供运行时应用程序配置。 它可以具有“.ts”、“.js”或“.mjs”中的任何一个扩展名。
app.config.ts
ts
export default defineAppConfig({
foo: 'bar'
})
不要在 app.config 文件中放置任何秘密值。 它暴露给用户客户端包。
定义应用配置
要向应用程序的其余部分公开配置和环境变量，您需要在 app.config 文件中定义配置。
示例:
app.config.ts
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
ts
declare module 'nuxt/schema' {
interface AppConfigInput {
/** Theme configuration */
theme?: {
/** Primary app color */
primaryColor?: string
}
}
}
// 确保在扩充类型时导入/导出某些内容始终很重要
export {}
键入应用程序配置输出
如果您想键入调用 useAppConfig() 的结果，那么您将需要扩展 AppConfig。
输入 AppConfig 时要小心，因为您将覆盖 Nuxt 从您实际定义的应用程序配置中推断出的类型。
index.d.ts
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
ts
export default defineAppConfig({
// Default array value
array: ['hello'],
})
app.config.ts
ts
export default defineAppConfig({
// 使用合并函数覆盖默认数组值
array: () => ['bonjour'],
})