配置

默认情况下，Nuxt 配置了合理的默认值，以提高您的开发效率。nuxt.config.ts 文件可以覆盖或扩展这些默认配置。

Nuxt 配置

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

一个最简化的配置文件导出了包含配置对象 defineNuxtConfig 函数。defineNuxtConfig 助手函数是全局可用的，无需导入。

export default defineNuxtConfig({
  // My Nuxt config
})

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

环境覆盖

您可以在 nuxt.config 中配置完全类型化的、按环境区分的覆盖。

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  },
  $env: {
    staging: {
      // 
    }
  },
})

要在运行 Nuxt CLI 命令时选择环境，只需将名称传递给 --envName 标志，如下所示：nuxi build --envName staging。

要了解有关这些覆盖机制的更多信息，请参阅 c12 文档中的 特定于环境的配置。

环境变量和私有令牌

runtimeConfig API 将环境变量等值暴露给应用程序的其余部分。默认情况下，这些键仅在服务器端可用。runtimeConfig.public 和 runtimeConfig.app（Nuxt 内部使用）中的键也可 在客户端使用。

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

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      apiBase: '/api'
    }
  }
})

# This will override the value of apiSecret
NUXT_API_SECRET=api_secret_token

这些变量使用 useRuntimeConfig() composable 暴露给应用程序的其余部分。

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>

应用配置

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

一个最简化的配置文件导出了包含配置对象 defineAppConfig 函数。defineAppConfig 助手函数是全局可用的，无需导入。

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

这些变量使用 useAppConfig composable 暴露给应用程序的其余部分。

<script setup lang="ts">
  // 通过 useAppConfig() 获取的对象会自动响应变更，触发依赖组件的重新渲染。
  const appConfig = useAppConfig()
</script>

runtimeConfig vs. app.config

如上所述，runtimeConfig 和 app.config 都用于将变量暴露给应用程序的其余部分。要确定应该使用哪个，请参考以下准则：

• runtimeConfig: 需要在构建后使用环境变量指定的私有或公共令牌。
  • 敏感数据管理：用于存储需要在运行时通过环境变量动态调整的敏感信息（如 API 密钥、数据库密码）。
  • 环境变量支持：通过 .env 文件或生产环境变量注入，支持前缀 NUXT_ 覆盖配置值（例如 NUXT_PUBLIC_API_BASE）。
  • 访问范围：分为 private（仅服务端访问）和 public（客户端和服务端均可访问），默认私密性更高
• app.config: 在构建时确定的公共令牌，网站配置（如主题变体、标题）以及任何不敏感的项目配置。
  • 非敏感公共配置：适用于构建时确定的公共数据（如主题颜色、标题、静态 CDN 路径），无需环境变量覆盖。
  • 动态性：支持通过 updateAppConfig 在运行时动态更新配置，且变更会触发热模块替换（HMR），无需重启应用。

外部配置文件

Nuxt 使用 nuxt.config.ts 文件作为配置的唯一来源(Nuxt 在构建时会忽略外部配置文件，开发者需将原外部配置迁移至 nuxt.config.ts 中)，并跳过读取外部配置文件。在构建项目的过程中，您可能需要配置这些文件。下表重点介绍了常见的配置，并在适用的情况下说明了如何在 Nuxt 中配置它们。

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

Vue 配置

使用 Vite

如果您需要将选项传递给 @vitejs/plugin-vue 或 @vitejs/plugin-vue-jsx，可以在 nuxt.config 文件中进行配置。

• vite.vue 用于 @vitejs/plugin-vue。在此处查看可用选项：链接。
• vite.vueJsx 用于 @vitejs/plugin-vue-jsx。在此处查看可用选项：链接。

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true
    },
    vueJsx: {
      mergeProps: true
    }
  }
})

使用 webpack

如果您使用 webpack 并且需要配置 vue-loader，您可以使用 nuxt.config 文件中的 webpack.loaders.vue 键进行配置。可用选项在 此处定义。

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      }
    }
  }
})

启用实验性 Vue 特性

您可能需要在 Vue 中启用实验性特性，例如 propsDestructure。无论您使用哪个构建器，Nuxt 都提供了一种在 nuxt.config.ts 中轻松实现此目的的方法：

export default defineNuxtConfig({
  vue: {
    propsDestructure: true
  }
})

从 Vue 3.4 和 Nuxt 3.9 迁移实验性的 reactivityTransform

自 Nuxt 3.9 和 Vue 3.4 起，reactivityTransform 已从 Vue 移至 Vue Macros，后者具有 Nuxt 集成 扩展模块。