配置

默认情况下,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 标志,如下所示: nuxt build --envName staging。

要了解这些覆盖背后的机制,请参阅 c12 文档中的 environment-specific configuration。

环境变量和私有令牌

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

这些值应在 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 文件位于源目录(默认为 app/)中,用于暴露可在构建时确定的公共变量。与 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 vs 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 集成。