配置

默认情况下，Nuxt 已经配置好以覆盖大多数使用场景。可以使用项目根目录下的 nuxt.config.ts 文件来覆盖或扩展此默认配置。

Nuxt 配置

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

一个最小化的配置文件导出 defineNuxtConfig 函数，函数包含一个你的配置对象。defineNuxtConfig 辅助函数在全局可用，无需导入。

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

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

环境覆盖

你可以在 nuxt.config 中配置完全类型化的、按环境的覆盖设置

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

在运行 Nuxt CLI 命令时选择环境，只需将名称传递给 --envName 标志，例如：nuxt 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() 组合式函数暴露给应用的其余部分。

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

应用配置

位于源代码目录（默认 app/）中的 app.config.ts 文件用于在构建时暴露可以确定的公共变量。与 runtimeConfig 选项相反，这些不能通过环境变量在构建后被覆盖。

一个最小化的配置文件导出 defineAppConfig 函数，函数包含一个你的配置对象。defineAppConfig 辅助函数在全局可用，无需导入。

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

这些变量可以通过 useAppConfig 组合式函数暴露给应用的其余部分。

<script setup lang="ts">
const appConfig = useAppConfig()
</script>

runtimeConfig 与 app.config

如上所述，runtimeConfig 和 app.config 都用于向应用的其余部分暴露变量。为了确定应该使用哪一个，以下是一些指南：

• runtimeConfig：需要在构建后使用环境变量指定的私有或公共令牌。
• app.config：在构建时确定的公共令牌，网站配置（如主题变体、标题）以及任何非敏感的项目配置。

外部配置文件

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 集成。