配置
默认情况下,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: {
//
},
$env: {
staging: {
//
}
},
})
要在运行 Nuxt CLI 命令时选择环境,只需将名称传递给 --envName
标志,例如:nuxi build --envName staging
。
要了解更多关于这些覆盖机制的信息,请参考 c12
文档中关于 environment-specific configuration 的内容。
$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()
composable 暴露给应用程序的其余部分。
<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
composable 暴露给应用程序的其余部分。
<script setup lang="ts">
const appConfig = useAppConfig()
</script>
runtimeConfig
vs 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 | prettier.config.js | 更多信息 |
Stylelint | stylelint.config.js | 更多信息 |
TailwindCSS | tailwind.config.js | 更多信息 |
Vitest | vitest.config.ts | 更多信息 |
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
}
})
实验性 reactivityTransform
从 Vue 3.4 和 Nuxt 3.9 迁移
自 Nuxt 3.9 和 Vue 3.4 以来,reactivityTransform
已从 Vue 移至 Vue Macros,后者具有 Nuxt 集成。