配置

默认情况下，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'
    }
  }
})

这些变量利用 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 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 集成。