配置

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

Nuxt 配置

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

一个最小的配置文件导出包含您配置的对象的 defineNuxtConfig 函数。 defineNuxtConfig 助手在全局范围内可用，无需导入。

export default defineNuxtConfig({
  // 我的 Nuxt 配置
})

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

环境覆盖

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

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

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

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

环境变量和私有令牌

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

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

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅在服务器端可用的私有键
    apiSecret: '123',
    // public 中的键也暴露给客户端
    public: {
      apiBase: '/api'
    }
  }
})

# 这将覆盖 apiSecret 的值
NUXT_API_SECRET=api_secret_token

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

<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 组合方法暴露给应用程序的其余部分。

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