默认情况下,Nuxt已配置好以覆盖大多数使用情况。使用 nuxt.config.ts
文件可以覆盖或扩展此默认配置。
Nuxt 配置
nuxt.config.ts
文件位于Nuxt项目的根目录中,可以覆盖或扩展应用程序的行为。
最简单的配置文件是导出 defineNuxtConfig
函数,该函数包含一个对象,其中包含您的配置信息。defineNuxtConfig
辅助函数在全局范围内可用,无需导入。
// nuxt.config.ts
export default defineNuxtConfig({
// My Nuxt config
})
所有配置项都在“配置参考”中有描述
您不必使用
TypeScript
构建Nuxt
应用程序。但是,强烈建议将nuxt.config
文件使用.ts
扩展名。这样,您可以从IDE中受益,以避免在编辑配置时出现拼写错误和其他错误。
runtimeConfig API将像环境变量一样的值暴露给应用程序的其他部分。默认情况下,这些键仅在服务器端可用。而在 runtimeConfig.public 中的键也可以在客户端使用。
这些值应该在 nuxt.config 中定义,并且可以使用环境变量进行覆盖。
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
// 这些是仅在服务器端可用的私钥
apiSecret: '123',
// public 中的 key 也会在客户端暴露出来
public: {
apiBase: '/api'
}
}
})
# .env
# 这些是仅在服务器端可用的私钥
NUXT_API_SECRET=api_secret_token
<!-- pages/index.vue -->
<script setup>
const runtimeConfig = useRuntimeConfig()
</script>
app.config.ts 文件位于源目录中(默认为项目根目录),用于公开可以在构建时确定的公共变量。与 runtimeConfig 选项相反,这些变量不能使用环境变量进行覆盖。
最小化的配置是:导出包含配置的对象的 defineAppConfig 函数。defineAppConfig 辅助函数在全局范围内可用,无需导入。
// app.config.ts
export default defineAppConfig({
title: 'Hello Nuxt',
theme: {
dark: true,
colors: {
primary: '#ff0000'
}
}
})
使用 useAppConfig 组合式函数,这些变量将被暴露给应用程序的其它部分
<!-- pages/index.vue -->
<script setup>
const appConfig = useAppConfig()
</script>
运行配置(runtimeConfig) VS 构建配置(app.config)
如上所述,runtimeConfig 和 app.config 都用于向应用程序的其他部分公开变量。为了确定何时应该使用其中之一,请遵循以下几个指南:
runtimeConfig:需要在构建后使用环境变量指定的私有或公共标记。
app.config:在构建时确定的公共标记,例如网站配置(如主题变量、标题等)和任何非敏感的项目配置。
特性 | runtimeConfig | app.config |
---|---|---|
客户端 | Hydrated | Bundled |
环境变量 | ✅ Yes | ❌ No |
响应式 | ✅ Yes | ✅ Yes |
类型支持 | ✅ Partial | ✅ Yes |
每个请求的配置 | ❌ No | ✅ Yes |
模块热更换 | ❌ No | ✅ Yes |
非原始 JS 类型 | ❌ No | ✅ Yes |
Nuxt使用nuxt.config.ts文件作为配置的唯一可信来源,并跳过读取外部配置文件。在构建项目的过程中,您可能需要配置这些配置项。以下表格突出了常见的配置项,以及在适用的情况下,如何使用Nuxt进行配置。
名称 | 配置文件 | 如何配置 |
---|---|---|
Nitro | nitro.config.ts | Use nitro key in nuxt.config |
PostCSS | postcss.config.js | Use postcss key in nuxt.config |
Vite | vite.config.ts | Use vite key in nuxt.config |
webpack | webpack.config.ts | webpack key in nuxt.config |
以下是其它常见的配置文件列表:
名称 | 配置文件 | 如何配置 |
---|---|---|
TypeScript | tsconfig.json | 更多信息 |
ESLint | .eslintrc.js | 更多信息 |
Prettier | .prettierrc.json | 更多信息 |
Stylelint | .stylelintrc.json | 更多信息 |
TailwindCSS | tailwind.config.js | 更多信息 |
Vitest | vitest.config.ts | 更多信息 |