使用 Vue & UI Pro 的仪表板模板

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 lang="ts">
const appConfig = useAppConfig()

console.log(appConfig.theme)
</script>

在配置自定义 srcDir 时,请确保将 app.config 文件放置在新 srcDir 路径的根目录下。

键入 App Config

Nuxt 尝试从提供的应用程序配置中自动生成 TypeScript 接口,因此您无需自己键入它。

但是,在某些情况下,您可能希望自己键入它。您可能希望键入两件事。

App Config 输入

AppConfigInput 可能被模块作者用来声明在设置应用配置时有效的输入选项。这不会影响 useAppConfig() 的类型。

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

// It is always important to ensure you import/export something when augmenting a type
export {}

应用配置输出

如果你想为调用 useAppConfig() 的结果添加类型,那么你需要扩展 AppConfig

在为 AppConfig 添加类型时要小心,因为你将覆盖 Nuxt 从你实际定义的应用配置中推断出的类型。
index.d.ts
declare module 'nuxt/schema' {
  interface AppConfig {
    // This will entirely replace the existing inferred `theme` property
    theme: {
      // You might want to type this value to add more specific types than Nuxt can infer,
      // such as string literal types
      primaryColor?: 'red' | 'blue'
    }
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

合并策略

Nuxt 对 AppConfig 在应用的 层级 中使用自定义合并策略。

该策略使用 函数合并器 实现,它允许为 app.config 中每个值为数组的键定义自定义合并策略。

函数合并器只能在扩展层中使用,不能在项目中的主 app.config 中使用。

以下是如何使用它的示例:

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