配置
默认情况下，Nuxt 的配置涵盖了大多数用例。 nuxt.config.ts 文件可以覆盖或扩展此默认配置。
Nuxt 配置
nuxt.config.ts 文件位于 Nuxt 项目的根目录，可以覆盖或扩展应用程序的行为。
一个最小的配置文件导出包含配置对象的 defineNuxtConfig 函数。 defineNuxtConfig 助手在全局范围内可用，无需导入。
export default defineNuxtConfig({
// My Nuxt config
})
此文件通常会在文档中提到，例如添加自定义脚本、注册模块或更改渲染模式。
nuxt.config 文件使用 .ts 扩展名。这样，您就可以从 IDE 中的提示中受益，避免在编辑配置时出现拼写错误和错误。环境覆盖
您可以在 nuxt.config 中配置完全类型化的、每个环境的覆盖。
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
},
$myCustomName: {
//
},
})
在运行 Nuxt CLI 命令时选择环境，只需将名称传递给 --envName 标志，例如：nuxi build --envName myCustomName。
要了解有关这些覆盖背后的机制的更多信息，请参阅 c12 关于特定于环境的配置的文档。
$meta 键提供您或您的层使用者可能使用的元数据。环境变量和私有令牌
runtimeConfig API 将环境变量等值暴露给应用程序的其余部分。默认情况下，这些键仅在服务器端可用。 runtimeConfig.public 中的键也可在客户端使用。
这些值应在 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'
}
}
})
这些变量使用 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：在构建时确定的公共令牌，网站配置（例如主题变体、标题和任何非敏感的项目配置）。
| 特性 | runtimeConfig | app.config |
|---|---|---|
| 客户端 | 水合 | 捆绑 |
| 环境变量 | ✅ 是 | ❌ 否 |
| 响应式 | ✅ 是 | ✅ 是 |
| 类型支持 | ✅ 部分 | ✅ 是 |
| 每个请求的配置 | ❌ 否 | ✅ 是 |
| 热模块替换 | ❌ 否 | ✅ 是 |
| 非原始 JS 类型 | ❌ 否 | ✅ 是 |
外部配置文件
Nuxt 使用 nuxt.config.ts 文件作为配置的唯一真相来源，并跳过读取外部配置文件。在构建项目的过程中，您可能需要配置这些文件。下表重点介绍了常见的配置，以及在适用的情况下，如何在 Nuxt 中配置它们。
| 名称 | 配置文件 | 如何配置 |
|---|---|---|
| Nitro | nitro.config.ts | 在 nuxt.config 中使用 nitro 键 |
| PostCSS | postcss.config.js | 在 nuxt.config 中使用 postcss 键 |
| Vite | vite.config.ts | 在 nuxt.config 中使用 vite 键 |
| webpack | webpack.config.ts | 在 nuxt.config 中使用 webpack 键 |
以下是其他一些常见的配置文件列表
| 名称 | 配置文件 | 如何配置 |
|---|---|---|
| TypeScript | tsconfig.json | 更多信息 |
| ESLint | eslint.config.js | 更多信息 |
| Prettier | .prettierrc.json | 更多信息 |
| Stylelint | .stylelintrc.json | 更多信息 |
| TailwindCSS | tailwind.config.js | 更多信息 |
| Vitest | vitest.config.ts | 更多信息 |
Vue 配置
使用 Vite
如果您需要将选项传递给 @vitejs/plugin-vue 或 @vitejs/plugin-vue-jsx，您可以在 nuxt.config 文件中执行此操作。
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 集成。