配置

默认情况下，Nuxt已配置好以覆盖大多数使用情况。使用 nuxt.config.ts 文件可以覆盖或扩展此默认配置。

Nuxt 配置

nuxt.config.ts 文件位于Nuxt项目的根目录中，可以覆盖或扩展应用程序的行为。

最简单的配置文件是导出 defineNuxtConfig 函数，该函数包含一个对象，其中包含您的配置信息。defineNuxtConfig 辅助函数在全局范围内可用，无需导入。

// nuxt.config.ts
export default defineNuxtConfig({
  // My Nuxt config
})

这个文件经常会在文档中提到，例如用于添加自定义脚本、注册模块或更改渲染模式等。

所有配置项都在“配置参考”中有描述

您不必使用 TypeScript 构建 Nuxt 应用程序。但是，强烈建议将 nuxt.config 文件使用 .ts 扩展名。这样，您可以从IDE中受益，以避免在编辑配置时出现拼写错误和其他错误。

环境变量和私有令牌

runtimeConfig API将像环境变量一样的值暴露给应用程序的其他部分。默认情况下，这些键仅在服务器端可用。而在 runtimeConfig.public 中的键也可以在客户端使用。

这些值应该在 nuxt.config 中定义，并且可以使用环境变量进行覆盖。

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // 这些是仅在服务器端可用的私钥
    apiSecret: '123',
    // public 中的 key 也会在客户端暴露出来
    public: {
      apiBase: '/api'
    }
  }
})

# .env
# 这些是仅在服务器端可用的私钥
NUXT_API_SECRET=api_secret_token

使用 useRuntimeConfig 组合式函数，这些变量将被暴露给应用程序的其他部分

<!-- pages/index.vue -->
<script setup>
const runtimeConfig = useRuntimeConfig()
</script>

了解更多  文档 > 指南 > 深入了解 > 运行时配置

应用程序配置

app.config.ts 文件位于源目录中（默认为项目根目录），用于公开可以在构建时确定的公共变量。与 runtimeConfig 选项相反，这些变量不能使用环境变量进行覆盖。

最小化的配置是：导出包含配置的对象的 defineAppConfig 函数。defineAppConfig 辅助函数在全局范围内可用，无需导入。

// app.config.ts
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

使用 useAppConfig 组合式函数，这些变量将被暴露给应用程序的其它部分

<!-- pages/index.vue -->
<script setup>
const appConfig = useAppConfig()
</script>

运行配置(runtimeConfig) VS 构建配置(app.config)

如上所述，runtimeConfig 和 app.config 都用于向应用程序的其他部分公开变量。为了确定何时应该使用其中之一，请遵循以下几个指南：

• runtimeConfig：需要在构建后使用环境变量指定的私有或公共标记。

• app.config：在构建时确定的公共标记，例如网站配置（如主题变量、标题等）和任何非敏感的项目配置。

外部配置文件

Nuxt使用nuxt.config.ts文件作为配置的唯一可信来源，并跳过读取外部配置文件。在构建项目的过程中，您可能需要配置这些配置项。以下表格突出了常见的配置项，以及在适用的情况下，如何使用Nuxt进行配置。

以下是其它常见的配置文件列表：