通过 100+ 技巧合集学习 Nuxt!

配置

Nuxt 默认配置了合理的选项,以提高您的生产力。

默认情况下,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 中受益于提示,以避免在编辑配置时出现拼写错误和错误。

环境覆盖

您可以在您的 nuxt.config 中配置完全类型化、按环境的覆盖

nuxt.config.ts
export default 
defineNuxtConfig
({
$production
: {
routeRules
: {
'/**': {
isr
: true }
} },
$development
: {
// },
$env
: {
staging
: {
// } }, })

要在运行 Nuxt CLI 命令时选择环境,只需将名称传递给 --envName 标志,例如:nuxi build --envName staging

要了解更多关于这些覆盖机制的信息,请参考 c12 文档中关于 environment-specific configuration 的内容。

观看 Alexander Lichter 关于环境感知的 nuxt.config.ts 的视频。
如果您正在编写层,您也可以使用 $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 暴露给应用程序的其余部分。

pages/index.vue
<script setup lang="ts">
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 composable 暴露给应用程序的其余部分。

pages/index.vue
<script setup lang="ts">
const appConfig = useAppConfig()
</script>
文档 > 指南 > 目录结构 > 应用配置 中阅读更多内容。

runtimeConfig vs app.config

如上所述,runtimeConfigapp.config 都用于将变量暴露给应用程序的其余部分。为了确定您应该使用哪一个,这里有一些指导原则

  • runtimeConfig:需要在构建后使用环境变量指定的私有或公共令牌。
  • app.config:在构建时确定的公共令牌,网站配置,例如主题变体、标题以及任何不敏感的项目配置。
特性runtimeConfigapp.config
客户端已注水已打包
环境变量✅ 是❌ 否
响应式✅ 是✅ 是
类型支持✅ 部分✅ 是
每个请求的配置❌ 否✅ 是
热模块替换❌ 否✅ 是
非原始 JS 类型❌ 否✅ 是

外部配置文件

Nuxt 使用 nuxt.config.ts 文件作为配置的单一来源,并跳过读取外部配置文件。在构建项目的过程中,您可能需要配置这些。下表重点介绍了常见的配置,以及在适用的情况下,如何使用 Nuxt 配置它们。

名称配置文件如何配置
Nitronitro.config.tsnuxt.config 中使用 nitro
PostCSSpostcss.config.jsnuxt.config 中使用 postcss
Vitevite.config.tsnuxt.config 中使用 vite
webpackwebpack.config.tsnuxt.config 中使用 webpack

以下是其他常见配置文件的列表

名称配置文件如何配置
TypeScripttsconfig.json更多信息
ESLinteslint.config.js更多信息
Prettierprettier.config.js更多信息
Stylelintstylelint.config.js更多信息
TailwindCSStailwind.config.js更多信息
Vitestvitest.config.ts更多信息

Vue 配置

使用 Vite

如果您需要将选项传递给 @vitejs/plugin-vue@vitejs/plugin-vue-jsx,您可以在 nuxt.config 文件中执行此操作。

  • vite.vue 用于 @vitejs/plugin-vue。在此处查看可用选项。
  • vite.vueJsx 用于 @vitejs/plugin-vue-jsx。在此处查看可用选项。
nuxt.config.ts
export default 
defineNuxtConfig
({
vite
: {
vue
: {
customElement
: true
},
vueJsx
: {
mergeProps
: true
} } })
文档 > API > 配置 > Nuxt Config#vue 中阅读更多内容。

使用 webpack

如果您使用 webpack 并且需要配置 vue-loader,您可以使用 nuxt.config 文件中的 webpack.loaders.vue 键来执行此操作。可用选项在此处定义

nuxt.config.ts
export default 
defineNuxtConfig
({
webpack
: {
loaders
: {
vue
: {
hotReload
: true,
} } } })
文档 > API > 配置 > Nuxt Config#loaders 中阅读更多内容。

启用实验性 Vue 功能

您可能需要在 Vue 中启用实验性功能,例如 propsDestructure。Nuxt 提供了一种在 nuxt.config.ts 中执行此操作的简便方法,无论您使用哪个构建器

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 集成

文档 > API > 配置 > Nuxt Config#vue 1 中阅读更多内容。