配置
Nuxt已经配置了合理的默认值，以提高你的生产效率。
默认情况下，Nuxt已经配置了大多数使用情况。nuxt.config.ts文件可以覆盖或扩展此默认配置。
Nuxt配置
nuxt.config.ts文件位于Nuxt项目的根目录，可以覆盖或扩展应用程序的行为。
一个最简配置文件导出了defineNuxtConfig函数，函数中包含了一个配置对象。defineNuxtConfig助手函数在全局范围内无需导入即可使用。
export default defineNuxtConfig({
// 我的Nuxt配置
})
通常在文档中会提到此文件，例如添加自定义脚本、注册模块或更改渲染模式。
.ts扩展名作为nuxt.config文件的扩展名。这样你可以在IDE中受益于提示，避免在编辑配置时出现拼写错误和其他错误。环境覆盖
你可以在nuxt.config中配置完全类型化的环境覆盖。
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
$meta键来提供你自己或你的层的使用者可能使用的元数据。环境变量和私有令牌
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与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 | .eslintrc.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 中启用实验性功能，例如 defineModel 或 propsDestructure。无论你使用哪个构建工具，Nuxt 都提供了一种简单的方法在 nuxt.config.ts 中进行配置：
export default defineNuxtConfig({
vue: {
defineModel: true,
propsDestructure: true
}
})
详细内容请参阅：