app.config.ts
使用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。
pages/index.vue
<script setup>
const appConfig = useAppConfig()
console.log(appConfig.theme)
</script>
类型化App Config
Nuxt会尝试根据提供的app config自动生成TypeScript接口，因此你不必自己输入类型。
然而，有些情况下你可能想自己输入类型。有两种可能需要输入类型的情况。
App Config输入
AppConfigInput可能被模块作者用于声明设置app config时有效的输入选项。这不会影响useAppConfig()的类型。
index.d.ts
declare module 'nuxt/schema' {
interface AppConfigInput {
/** 主题配置 */
theme?: {
/** 主要应用颜色 */
primaryColor?: string
}
}
}
// 当增强类型时，确保始终导入/导出某些内容是很重要的
export {}
App Config输出
如果你想为调用useAppConfig()的结果输入类型，那么你需要扩展AppConfig。
在对
AppConfig进行类型化时要小心，因为这将覆盖Nuxt从你实际定义的app config中推断出的类型。index.d.ts
declare module 'nuxt/schema' {
interface AppConfig {
// 这将完全替换现有推断的`theme`属性
theme: {
// 你可能希望为这个值输入类型，以添加比Nuxt可以推断的更具体的类型，比如字符串字面量类型
primaryColor?: 'red' | 'blue'
}
}
}
// 当增强类型时，确保始终导入/导出某些内容是很重要的
export {}
合并策略
Nuxt在应用程序的层中使用自定义合并策略来合并AppConfig。
这个策略是使用函数合并器实现的，它允许为app.config中具有数组值的每个键定义自定义合并策略。
函数合并器只应在应用程序的基本
app.config中使用。以下是一个示例：
export default defineAppConfig({
// 默认数组值
array: ['hello'],
})