Nuxt 配置 - Nuxt 框架

此文件是从 Nuxt 源代码自动生成的。

别名

您可以通过定义其他别名来访问 JavaScript 和 CSS 中的自定义目录，从而改善您的开发体验。

类型: object
默认值

{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "#shared": "/<rootDir>/shared",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public",
  "#build": "/<rootDir>/.nuxt",
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}

注意: 在 Webpack 上下文中（图像源、CSS - 但不是 JavaScript），您*必须*通过在别名前缀 ~ 来访问您的别名。

注意: 这些别名将自动添加到生成的 .nuxt/tsconfig.json 中，以便您可以获得完整的类型支持和路径自动完成。如果您需要进一步扩展 ./.nuxt/tsconfig.json 提供的选项，请确保在此处或 nuxt.config 中的 typescript.tsConfig 属性中添加它们。

示例:

export default {
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
  }
}

analyzeDir

运行 nuxt analyze 时，Nuxt 将存储生成文件的目录。

如果指定了相对路径，它将相对于您的 rootDir。

类型: string
默认值: "/<rootDir>/.nuxt/analyze"

app

Nuxt 应用配置。

`baseURL`

Nuxt 应用的基本路径。

例如

类型: string
默认值: "/"

示例:

export default defineNuxtConfig({
  app: {
    baseURL: '/prefix/'
  }
})

示例:

NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs

`buildAssetsDir`

已构建站点资源的文件夹名称，相对于 baseURL（如果设置了 cdnURL，则相对于 cdnURL）。这在构建时设置，不应在运行时自定义。

类型: string
默认值: "/_nuxt/"

`cdnURL`

一个用于提供公共文件夹的绝对 URL（仅限生产环境）。

例如

类型: string
默认值: ""

示例:

export default defineNuxtConfig({
  app: {
    cdnURL: 'https://mycdn.org/'
  }
})

示例:

NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjs

`head`

设置每个页面上 <head> 的默认配置。

类型: object
默认值

{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [],
  "style": [],
  "script": [],
  "noscript": []
}

示例:

app: {
  head: {
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    script: [
      // <script src="https://myawesome-lib.js"></script>
      { src: 'https://awesome-lib.js' }
    ],
    link: [
      // <link rel="stylesheet" href="https://myawesome-lib.css">
      { rel: 'stylesheet', href: 'https://awesome-lib.css' }
    ],
    // please note that this is an area that is likely to change
    style: [
      // <style type="text/css">:root { color: red }</style>
      { children: ':root { color: red }', type: 'text/css' }
    ],
    noscript: [
      // <noscript>JavaScript is required</noscript>
      { children: 'JavaScript is required' }
    ]
  }
}

`keepalive`

页面之间 KeepAlive 配置的默认值。

这可以通过单个页面的 definePageMeta 覆盖。仅允许 JSON 可序列化值。

类型: boolean
默认值: false

参见: Vue KeepAlive

`layoutTransition`

布局过渡的默认值。

这可以通过单个页面的 definePageMeta 覆盖。仅允许 JSON 可序列化值。

类型: boolean
默认值: false

参见: Vue 过渡文档

`pageTransition`

页面过渡的默认值。

这可以通过单个页面的 definePageMeta 覆盖。仅允许 JSON 可序列化值。

类型: boolean
默认值: false

参见: Vue 过渡文档

`rootAttrs`

自定义 Nuxt 根元素 ID。

类型: object
默认值

{
  "id": "__nuxt"
}

`rootId`

自定义 Nuxt 根元素 ID。

类型: string
默认值: "__nuxt"

`rootTag`

自定义 Nuxt 根元素标签。

类型: string
默认值: "div"

`teleportAttrs`

自定义 Nuxt Teleport 元素属性。

类型: object
默认值

{
  "id": "teleports"
}

`teleportId`

自定义 Nuxt Teleport 元素 ID。

类型: string
默认值: "teleports"

`teleportTag`

自定义 Nuxt 根元素标签。

类型: string
默认值: "div"

`viewTransition`

视图过渡的默认值。

只有在实验性的视图过渡支持在您的 `nuxt.config` 文件中启用时，此功能才有效。这可以通过单个页面的 definePageMeta 覆盖。

类型: boolean
默认值: false

参见: Nuxt 视图过渡 API 文档

appConfig

其他应用配置

为了进行编程使用和类型支持，您可以使用此选项直接提供应用配置。它将与 app.config 文件作为默认值合并。

appId

对于多应用项目，Nuxt 应用的唯一 ID。

默认为 nuxt-app。

类型: string
默认值: "nuxt-app"

build

共享构建配置。

`analyze`

Nuxt 允许您可视化您的捆绑包以及如何优化它们。

设置为 true 以启用捆绑包分析，或传递一个包含选项的对象：用于 Webpack 或用于 Vite。

类型: object
默认值

{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

示例:

analyze: {
  analyzerMode: 'static'
}

`templates`

您可以提供自己的模板，这些模板将根据 Nuxt 配置进行渲染。此功能对于与模块一起使用特别有用。

模板使用 lodash/template 渲染。

类型: array

示例:

templates: [
  {
    src: '~/modules/support/plugin.js', // `src` can be absolute or relative
    dst: 'support.js', // `dst` is relative to project `.nuxt` dir
    options: {
      // Options are provided to template as `options` key
      live_chat: false
    }
  }
]

`transpile`

如果您想使用 Babel 转换特定的依赖项，可以在这里添加它们。transpile 中的每个项目可以是包名称、函数、字符串或正则表达式对象，匹配依赖项的文件名。

您还可以使用函数来有条件地转换。该函数将接收一个对象（{ isDev, isServer, isClient, isModern, isLegacy }）。

类型: array

示例:

transpile: [({ isLegacy }) => isLegacy && 'ky']

buildDir

定义构建后的 Nuxt 文件将放置的目录。

许多工具假设 .nuxt 是一个隐藏目录（因为它以 . 开头）。如果这是一个问题，您可以使用此选项来防止这种情况。

类型: string
默认值: "/<rootDir>/.nuxt"

示例:

export default {
  buildDir: 'nuxt-build'
}

buildId

与构建匹配的唯一标识符。这可能包含项目当前状态的哈希值。

类型: string
默认值: "e0d1495b-a2d7-4596-9924-13454d891bdb"

builder

用于捆绑应用 Vue 部分的构建器。

类型: string
默认值: "@nuxt/vite-builder"

compatibilityDate

为您的应用指定一个兼容性日期。

这用于控制 Nitro、Nuxt Image 和其他可能在不进行主要版本更新的情况下更改行为的模块中预设的行为。我们计划在未来改进围绕此功能的工具。

css

您可以定义要全局设置的 CSS 文件/模块/库（包含在每个页面中）。

Nuxt 将根据其扩展名自动猜测文件类型并使用相应的预处理器。如果您需要使用它们，您仍然需要安装所需的加载程序。

类型: array

示例:

css: [
  // Load a Node.js module directly (here it's a Sass file).
  'bulma',
  // CSS file in the project
  '~/assets/css/main.css',
  // SCSS file in the project
  '~/assets/css/main.scss'
]

debug

设置为 true 以启用调试模式。

目前，它在服务器上打印出钩子名称和时间，并在浏览器中记录钩子参数。

类型: boolean
默认值: false

dev

Nuxt 是否在开发模式下运行。

通常，您不需要设置此项。

类型: boolean
默认值: false

devServer

`https`

是否启用 HTTPS。

类型: boolean
默认值: false

示例:

export default defineNuxtConfig({
  devServer: {
    https: {
      key: './server.key',
      cert: './server.crt'
    }
  }
})

`url`

侦听开发服务器 URL。

这不应该直接设置，因为它将始终被开发服务器覆盖为完整 URL（用于模块和内部使用）。

类型: string
默认值: "https://127.0.0.1:3000"

devServerHandlers

Nitro 仅限开发的服务器处理程序。

类型: array

参见：Nitro 服务器路由文档

devtools

启用 Nuxt DevTools 进行开发。

Devtools 的重大更改可能不会反映在 Nuxt 的版本上。

参见：Nuxt DevTools 获取更多信息。

dir

自定义 Nuxt 使用的默认目录结构。

除非需要，否则最好坚持使用默认值。

`assets`

资产目录（在您的构建中作为 ~assets 别名）。

类型: string
默认值："assets"

`layouts`

布局目录，其中的每个文件都将自动注册为 Nuxt 布局。

类型: string
默认值："layouts"

`middleware`

中间件目录，其中的每个文件都将自动注册为 Nuxt 中间件。

类型: string
默认值："middleware"

`modules`

模块目录，其中的每个文件都将自动注册为 Nuxt 模块。

类型: string
默认值："modules"

`pages`

将被处理以自动生成您的应用程序页面路由的目录。

类型: string
默认值："pages"

`plugins`

插件目录，其中的每个文件都将自动注册为 Nuxt 插件。

类型: string
默认值："plugins"

`public`

包含静态文件的目录，可以通过 Nuxt 服务器直接访问，并在生成应用程序时复制到您的 dist 文件夹中。

类型: string
默认值："public"

`shared`

共享目录。此目录在应用程序和服务器之间共享。

类型: string
默认值："shared"

experimental

`appManifest`

使用应用程序清单以尊重客户端上的路由规则。

类型: boolean
默认值：true

`asyncContext`

启用本机异步上下文，以便嵌套的可组合函数可以访问。

类型: boolean
默认值: false

参见：Nuxt PR #20918

`asyncEntry`

设置为 true 以为 Vue 捆绑包生成异步入口点（以支持模块联合）。

类型: boolean
默认值: false

`buildCache`

根据配置和源文件的哈希值缓存 Nuxt/Nitro 构建工件。

这仅适用于应用程序 Vue/Nitro 部分的 srcDir 和 serverDir 中的源文件。

类型: boolean
默认值: false

`checkOutdatedBuildInterval`

设置检查新构建的时间间隔（以毫秒为单位）。当 experimental.appManifest 为 false 时禁用。

设置为 false 以禁用。

类型: number
默认值：3600000

`clientFallback`

是否启用实验性 <NuxtClientFallback> 组件，以便在 SSR 中出现错误时在客户端呈现内容。

类型: boolean
默认值: false

`clientNodeCompat`

使用 unenv 自动填充客户端构建中的 Node.js 导入。

类型: boolean
默认值: false

参见：unenv

`compileTemplate`

是否使用 lodash.template 编译 Nuxt 模板。

此标志将在 v4 发布时删除，仅供 Nuxt v3.12+ 中的高级测试或在夜间发布渠道中使用。

类型: boolean
默认值：true

`componentIslands`

使用 <NuxtIsland> 和 .island.vue 文件进行实验性组件岛支持。

默认情况下，它设置为“auto”，这意味着仅当您的应用程序中存在岛屿、服务器组件或服务器页面时才会启用它。

类型: string
默认值："auto"

`configSchema`

配置模式支持

类型: boolean
默认值：true

参见：Nuxt Issue #15592

`cookieStore`

启用 CookieStore 支持以侦听 cookie 更新（如果浏览器支持）并刷新 useCookie ref 值。

类型: boolean
默认值：true

参见：CookieStore

`crossOriginPrefetch`

使用推测规则 API 启用跨源预取。

类型: boolean
默认值: false

`defaults`

这允许为核心 Nuxt 组件和可组合函数指定默认选项。

这些选项可能会在将来移动到其他位置，例如 app.config 或 app/ 目录中。

`nuxtLink`

`componentName`

类型: string
默认值："NuxtLink"

`prefetch`

类型: boolean
默认值：true

`prefetchOn`

`visibility`

类型: boolean
默认值：true

`useAsyncData`

适用于 useAsyncData（以及因此适用于 useFetch）的选项

`deep`

类型: boolean
默认值：true

`errorValue`

类型: string
默认值："null"

`value`

类型: string
默认值："null"

`emitRouteChunkError`

加载 vite/webpack 块时发生错误时，发出 app:chunkError 钩子。

默认情况下，当块加载失败时导航到新路由时，Nuxt 还会重新加载新路由（automatic）。将 automatic-immediate 设置为会导致 Nuxt 在块加载失败时立即重新加载当前路由（而不是等待导航）。您可以通过将其设置为 false 来禁用自动处理，或者通过将其设置为 manual 来手动处理块错误。

类型: string
默认值："automatic"

参见：Nuxt PR #19038

`externalVue`

在构建时外部化 vue、@vue/* 和 vue-router。

类型: boolean
默认值：true

参见：Nuxt Issue #13632

`headNext`

使用新的实验性头部优化

添加 capo.js 头部插件以更有效的方式渲染头部中的标签。- 使用哈希水合插件减少初始水合
类型: boolean
默认值：true

参见：Nuxt Discussion #22632

`inlineRouteRules`

允许使用 defineRouteRules 在您的 ~/pages 目录中直接定义 routeRules。

规则根据路径进行转换并应用于服务器请求。例如，在 ~/pages/foo/bar.vue 中定义的规则将应用于 /foo/bar 请求。~/pages/foo/[id].vue 中的规则将应用于 /foo/** 请求。为了获得更多控制权，例如，如果您在页面的 definePageMeta 中使用自定义 path 或 alias，您应该在您的 nuxt.config 中直接设置 routeRules。

类型: boolean
默认值: false

`localLayerAliases`

解析位于图层中的 ~、~~、@ 和 @@ 别名，相对于其图层源和根目录。

类型: boolean
默认值：true

`navigationRepaint`

在导航之前等待一个动画帧，这为浏览器提供了一个重绘的机会，确认用户交互。

它可以在预渲染路由上导航时减少 INP。

类型: boolean
默认值：true

`noVueServer`

在 nitro 中禁用 vue 服务器渲染端点。

类型: boolean
默认值: false

`normalizeComponentNames`

确保自动生成的 Vue 组件名称与您用于自动导入组件的完整组件名称匹配。

类型: boolean
默认值: false

`payloadExtraction`

启用此选项（默认情况下）时，将提取预渲染页面的有效负载。

类型: boolean
默认值：true

`polyfillVueUseHead`

是否为依赖于旧 @vueuse/head API 的模块、插件或用户代码添加兼容性层。

禁用此功能是为了将客户端捆绑包减少约 0.5kb。

类型: boolean
默认值: false

`relativeWatchPaths`

是否在 builder:watch 钩子中提供相对路径。

此标志将在 v4 发布时删除，仅供 Nuxt v3.12+ 中的高级测试或在夜间发布渠道中使用。

类型: boolean
默认值：true

`renderJsonPayloads`

渲染 JSON 有效负载，支持恢复复杂类型。

类型: boolean
默认值：true

`resetAsyncDataToUndefined`

clear 和 clearNuxtData 是否应将异步数据重置为其默认值，还是将其更新为 null/undefined。

类型: boolean
默认值：true

`respectNoSSRHeader`

允许通过设置 x-nuxt-no-ssr 标头来禁用 Nuxt SSR 响应。

类型: boolean
默认值: false

`restoreState`

在块错误或手动 reloadNuxtApp() 调用后重新加载页面时，是否从 sessionStorage 恢复 Nuxt 应用程序状态。

为了避免水合错误，它将仅在 Vue 应用程序挂载后应用，这意味着初始加载时可能会出现闪烁。在启用此功能之前请仔细考虑，因为它可能会导致意外行为，并考虑为 useState 提供明确的键，因为自动生成的键可能在构建之间不匹配。

类型: boolean
默认值: false

`scanPageMeta`

允许在构建时将 definePageMeta 中定义的一些路由元数据公开给模块（别名、名称、路径、重定向）。

这仅适用于静态或字符串/数组，而不是变量或条件赋值。

类型: boolean
默认值：true

参见：Nuxt Issues #24770

`sharedPrerenderData`

自动在预渲染的页面之间共享有效负载数据。当预渲染使用 useAsyncData 或 useFetch 并对不同页面获取相同数据的站点时，这会导致性能显着提高。

启用此功能时，确保数据的任何唯一键始终可解析为相同的数据尤其重要。例如，如果您正在使用 useAsyncData 来获取与特定页面相关的数据，则应提供一个唯一匹配该数据的键。（useFetch 应该会自动为您执行此操作。）

类型: boolean
默认值: false

示例:

// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Instead, you should use a key that uniquely identifies the data fetched.
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

`templateRouteInjection`

默认情况下，由自动导入的 useRoute() 可组合函数返回的路由对象与 <NuxtPage> 中当前视图中的页面保持同步。对于 vue-router 导出的 useRoute 或您的 Vue 模板中可用的默认 $route 对象，情况并非如此。

通过启用此选项，将注入一个混合来使 $route 模板对象与 Nuxt 管理的 useRoute() 保持同步。

类型: boolean
默认值：true

`templateUtils`

在编译 Nuxt 模板时，是否提供旧的 templateUtils 对象（包含 serialize、importName 和 importSources）。

此标志将在 v4 发布时删除，仅供 Nuxt v3.12+ 中的高级测试或在夜间发布渠道中使用。

类型: boolean
默认值：true

`treeshakeClientOnly`

从服务器捆绑包中删除客户端组件的内容。

类型: boolean
默认值：true

参见：Nuxt PR #5750

`typedPages`

使用 unplugin-vue-router 启用新的实验性类型化路由器。

类型: boolean
默认值: false

`viewTransition`

启用视图转换 API 与客户端路由器集成。

类型: boolean
默认值: false

参见：视图转换 API

`watcher`

设置将用作 Nuxt 监视服务的备用监视程序。

如果您的源目录与您的根目录相同，Nuxt 将使用“chokidar-granular”。这将忽略被排除在监视之外的顶级目录（如 node_modules 和 .git）。您可以将其设置为 parcel 以使用 @parcel/watcher，这可能会提高大型项目或 Windows 平台上的性能。您还可以将其设置为 chokidar 以监视源目录中的所有文件。

类型: string
默认值："chokidar"

参见：chokidar

参见：@parcel/watcher

`writeEarlyHints`

使用节点服务器时写入早期提示。

类型: boolean
默认值: false

注意：nginx 在当前版本中不支持 103 早期提示。

extends

从多个本地或远程源扩展项目。

值应为字符串或字符串数组，指向相对于当前配置的源目录或配置路径。您可以使用 github:、gh: gitlab: 或 bitbucket:

默认值：null

参见：c12 文档关于扩展配置层

参见：giget 文档

extensions

应由 Nuxt 解析器解析的扩展。

类型: array
默认值

[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

features

Nuxt 的某些功能可以根据您的需求选择加入或禁用。

`devLogs`

在开发过程中将服务器日志流式传输到客户端。这些日志可以在 dev:ssr-logs 钩子中处理。

如果设置为 silent，则日志不会打印到浏览器控制台。

类型: boolean
默认值: false

`inlineStyles`

在渲染 HTML 时内联样式（目前仅限于 vite）。

您还可以传递一个函数，该函数接收 Vue 组件的路径并返回一个布尔值，指示是否为该组件内联样式。

类型: boolean
默认值：true

`noScripts`

关闭 Nuxt 脚本和 JS 资源提示的渲染。您也可以在 routeRules 中更细粒度地禁用脚本。

类型: boolean
默认值: false

future

future 用于提前选择加入将在框架未来（可能是主要）版本中成为默认值的新功能。

`compatibilityVersion`

启用对 Nuxt v4 功能或标志的抢先体验。

将 compatibilityVersion 设置为 4 会更改整个 Nuxt 配置中的默认值，但您可以在测试时逐个重新启用 Nuxt v3 的行为（请参阅示例）。如果这样做，请提交问题，以便我们可以在 Nuxt 或生态系统中解决。

类型: number
默认值：3

示例:

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // To re-enable _all_ Nuxt v3 behaviour, set the following options:
  srcDir: '.',
  dir: {
    app: 'app'
  },
  experimental: {
    compileTemplate: true,
    templateUtils: true,
    relativeWatchPaths: true,
    resetAsyncDataToUndefined: true,
    defaults: {
      useAsyncData: {
        deep: true
      }
    }
  },
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: false
    }
  }
})

`multiApp`

这将启用对实验性多应用程序支持的抢先体验。

类型: boolean
默认值: false

参见：Nuxt Issue #21635

`typescriptBundlerResolution`

这将为 TypeScript 启用“Bundler”模块解析模式，这是 Nuxt 和 Vite 等框架的推荐设置。

在使用带有 exports 的现代库时，它可以提高类型支持。您可以将其设置为 false 以使用旧版“Node”模式，这是 TypeScript 的默认模式。

类型: boolean
默认值：true

参见：实现 bundler 模块解析的 TypeScript PR

generate

`exclude`

此选项不再使用。请改用 nitro.prerender.ignore。

类型: array

`routes`

要生成的路由。

如果您使用的是爬虫，这将只是路由生成的起点。在使用动态路由时，这通常是必要的。建议使用 nitro.prerender.routes。

类型: array

示例:

routes: ['/users/1', '/users/2', '/users/3']

hooks

钩子是 Nuxt 事件的监听器，通常在模块中使用，但也可用于 nuxt.config 中。

在内部，钩子遵循使用冒号的命名模式（例如，build:done）。为了方便配置，您也可以在 nuxt.config 中将其构建为分层对象（如下所示）。

默认值：null

示例:

import fs from 'node:fs'
import path from 'node:path'
export default {
  hooks: {
    build: {
      done(builder) {
        const extraFilePath = path.join(
          builder.nuxt.options.buildDir,
          'extra-file'
        )
        fs.writeFileSync(extraFilePath, 'Something extra')
      }
    }
  }
}

ignore

比 ignorePrefix 更具自定义性：在构建过程中，将忽略 ignore 数组中指定的与全局模式匹配的所有文件。

类型: array
默认值

[
  "**/*.stories.{js,cts,mts,ts,jsx,tsx}",
  "**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
  "**/*.d.{cts,mts,ts}",
  "**/.{pnpm-store,vercel,netlify,output,git,cache,data}",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

将选项直接传递给 node-ignore（Nuxt 用于忽略文件）。

参见：node-ignore

示例:

ignoreOptions: {
  ignorecase: false
}

ignorePrefix

如果 pages/、layouts/、middleware/ 和 public/ 目录中的任何文件的名称以 ignorePrefix 指定的前缀开头，则在构建过程中将忽略这些文件。这样是为了防止某些文件在构建的应用程序中被处理或提供服务。默认情况下，ignorePrefix 设置为“-”，忽略任何以“-”开头的文件。

类型: string
默认值："-"

imports

配置 Nuxt 如何自动将 composables 导入到您的应用程序中。

参见：Nuxt 文档

`dirs`

将自动导入的自定义目录数组。请注意，此选项不会覆盖默认目录（~/composables、~/utils）。

类型: array

示例:

imports: {
  // Auto-import pinia stores defined in `~/stores`
  dirs: ['stores']
}

`global`

类型: boolean
默认值: false

logLevel

构建日志时的日志级别。

在 CI 中运行或 TTY 不可用时默认为“silent”。然后，此选项在 Vite 中用作“silent”，在 Webpack 中用作“none”。

类型: string
默认值："info"

modules

模块是 Nuxt 扩展，可以扩展其核心功能并添加无限集成。

每个模块要么是一个字符串（可以引用一个包，或者是一个文件的路径），要么是一个元组，其中模块作为第一个字符串，选项作为第二个对象，要么是一个内联模块函数。Nuxt 尝试使用 node require 路径（在 node_modules 中）解析 modules 数组中的每个项目，然后如果使用 ~ 别名，则将从项目 srcDir 解析。

类型: array

注意：模块按顺序执行，因此顺序很重要。首先，加载 nuxt.config.ts 中定义的模块。然后，执行 modules/ 目录中找到的模块，它们按字母顺序加载。

示例:

modules: [
  // Using package name
  '@nuxtjs/axios',
  // Relative to your project srcDir
  '~/modules/awesome.js',
  // Providing options
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // Inline definition
  function () {}
]

modulesDir

用于设置模块目录以进行路径解析（例如，webpack 的 resolveLoading、nodeExternals 和 postcss）。

配置路径相对于 options.rootDir（默认值为当前工作目录）。如果您的项目组织为 yarn workspace 样式的单仓库，则可能需要设置此字段。

类型: array
默认值

[
  "/<rootDir>/node_modules"
]

示例:

export default {
  modulesDir: ['../../node_modules']
}

nitro

Nitro 的配置。

参见：Nitro 配置文档

`routeRules`

类型: object

`runtimeConfig`

类型: object
默认值

{
  "public": {},
  "app": {
    "buildId": "e0d1495b-a2d7-4596-9924-13454d891bdb",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  },
  "nitro": {
    "envPrefix": "NUXT_"
  }
}

optimization

构建时优化配置。

`asyncTransforms`

直接传递给来自 unctx 的转换器的选项，该选项在 await 之后保留异步上下文。

`asyncFunctions`

类型: array
默认值

[
  "defineNuxtPlugin",
  "defineNuxtRouteMiddleware"
]

`objectDefinitions`

`defineNuxtComponent`

类型: array
默认值

[
  "asyncData",
  "setup"
]

`defineNuxtPlugin`

类型: array
默认值

[
  "setup"
]

`definePageMeta`

类型: array
默认值

[
  "middleware",
  "validate"
]

`keyedComposables`

要为其注入密钥的函数。

只要传递给函数的参数数量小于 argumentLength，就会注入一个额外的魔法字符串，该字符串可用于对服务器和客户端之间的请求进行重复数据删除。您需要采取措施来处理此附加密钥。密钥将基于函数在文件中的调用位置唯一。

类型: array
默认值

[
  {
    "name": "useId",
    "argumentLength": 1
  },
  {
    "name": "callOnce",
    "argumentLength": 2
  },
  {
    "name": "defineNuxtComponent",
    "argumentLength": 2
  },
  {
    "name": "useState",
    "argumentLength": 2
  },
  {
    "name": "useFetch",
    "argumentLength": 3
  },
  {
    "name": "useAsyncData",
    "argumentLength": 3
  },
  {
    "name": "useLazyAsyncData",
    "argumentLength": 3
  },
  {
    "name": "useLazyFetch",
    "argumentLength": 3
  }
]

`treeShake`

从特定构建中删除代码。

`composables`

从服务器或客户端构建中删除 composables。

示例:

treeShake: { client: { myPackage: ['useServerOnlyComposable'] } }

`client`

类型: object
默认值

{
  "vue": [
    "onRenderTracked",
    "onRenderTriggered",
    "onServerPrefetch"
  ],
  "#app": [
    "definePayloadReducer",
    "definePageMeta",
    "onPrehydrate"
  ]
}

`server`

类型: object
默认值

{
  "vue": [
    "onMounted",
    "onUpdated",
    "onUnmounted",
    "onBeforeMount",
    "onBeforeUpdate",
    "onBeforeUnmount",
    "onRenderTracked",
    "onRenderTriggered",
    "onActivated",
    "onDeactivated"
  ],
  "#app": [
    "definePayloadReviver",
    "definePageMeta"
  ]
}

plugins

Nuxt 应用插件数组。

每个插件可以是一个字符串（可以是文件的绝对路径或相对路径）。如果以 .client 或 .server 结尾，则它将仅在相应的上下文中自动加载。它也可以是一个包含 src 和 mode 键的对象。

类型: array

注意：插件也会从 ~/plugins 目录自动注册，并且除非您需要自定义其顺序，否则这些插件无需在 nuxt.config 中列出。所有插件都根据其 src 路径进行重复数据删除。

参见：plugins/ 目录文档

示例:

plugins: [
  '~/plugins/foo.client.js', // only in client side
  '~/plugins/bar.server.js', // only in server side
  '~/plugins/baz.js', // both client & server
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
  { src: '~/plugins/server-only.js', mode: 'server' } // only on server side
]

postcss

`order`

用于排序 PostCSS 插件的策略。

类型: function

`plugins`

配置 PostCSS 插件的选项。

参见：PostCSS 文档

`autoprefixer`

用于解析 CSS 并为 CSS 规则添加供应商前缀的插件。

参见：autoprefixer

`cssnano`

类型: object

参见：cssnano 配置选项

rootDir

定义应用程序的根目录。

此属性可以被覆盖（例如，运行 nuxt ./my-app/ 将 rootDir 设置为从当前/工作目录到 ./my-app/ 的绝对路径。通常不需要配置此选项。

类型: string
默认值："/<rootDir>"

routeRules

应用于匹配的服务器路由的全局路由选项。

实验性：这是一个实验性功能，API 可能会在将来发生变化。

参见：Nitro 路由规则文档

router

`options`

传递给 vue-router 的其他路由器选项。除了 vue-router 的选项之外，Nuxt 还提供了其他选项来自定义路由器（见下文）。

注意：Nuxt 配置只能传递 JSON 可序列化选项。为了获得更多控制，您可以使用 app/router.options.ts 文件。

参见：Vue Router 文档。

`hashMode`

您可以在 SPA 模式下启用哈希历史记录。在此模式下，路由器在实际 URL 之前使用哈希字符 (#) 进行内部传递。启用后，**URL 永远不会发送到服务器**，并且**不支持 SSR**。

类型: boolean
默认值: false

默认值：false

`scrollBehaviorType`

自定义哈希链接的滚动行为。

类型: string
默认值："auto"

默认值：'auto'

runtimeConfig

运行时配置允许将动态配置和环境变量传递到 Nuxt 应用上下文。

此对象的 value 只能使用 useRuntimeConfig 从服务器访问。它主要应该保存私有配置，这些配置不会暴露在前端。这可能包括对您的 API 密钥令牌的引用。public 和 app 下的任何内容也将暴露给前端。value 在运行时会自动替换为匹配的环境变量，例如，设置环境变量 NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ 将覆盖下面示例中的两个 value。

类型: object
默认值

{
  "public": {},
  "app": {
    "buildId": "e0d1495b-a2d7-4596-9924-13454d891bdb",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

示例:

export default {
 runtimeConfig: {
    apiKey: '', // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY
    public: {
       baseURL: '' // Exposed to the frontend as well.
    }
  }
}

serverDir

定义 Nuxt 应用程序的服务器目录，其中保留 Nitro 路由、中间件和插件。

如果指定了相对路径，它将相对于您的 rootDir。

类型: string
默认值："/<srcDir>/server"

serverHandlers

Nitro 服务器处理程序。

每个处理程序都接受以下选项

handler：定义处理程序的文件的路径。 - route：处理程序可用的路由。这遵循 rou3 的约定 - method：应处理的请求的 HTTP 方法。 - middleware：指定它是否是中间件处理程序。 - lazy：指定是否使用延迟加载来导入处理程序。
类型: array

参见：server/ 目录文档

注意：来自 server/api、server/middleware 和 server/routes 的文件将由 Nuxt 自动注册。

示例:

serverHandlers: [
  { route: '/path/foo/**:name', handler: '~/server/foohandler.ts' }
]

sourcemap

是否生成源映射。

类型: object
默认值

{
  "server": true,
  "client": false
}

spaLoadingTemplate

布尔值或 HTML 文件的路径，其内容将插入使用 ssr: false 渲染的任何 HTML 页面中。

如果未设置，它将在您的其中一个层中使用 ~/app/spa-loading-template.html 文件（如果存在）。 - 如果为 false，则不会加载任何 SPA 加载指示器。 - 如果为 true，Nuxt 将在您的其中一个层中查找 ~/app/spa-loading-template.html 文件，或使用默认的 Nuxt 图像。一些不错的加载动画资源包括 SpinKit 或 SVG Spinners。
默认值：null

示例: ~/app/spa-loading-template.html

<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
.loader {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #000;
  border-left-color: #000;
  border-bottom-color: #efefef;
  border-right-color: #efefef;
  border-radius: 50%;
  -webkit-animation: loader 400ms linear infinite;
  animation: loader 400ms linear infinite;
}

\@-webkit-keyframes loader {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }
}
\@keyframes loader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

srcDir

定义 Nuxt 应用程序的源目录。

如果指定了相对路径，它将相对于 rootDir。

类型: string
默认值: "/<srcDir>"

示例:

export default {
  srcDir: 'src/'
}

这将与以下文件夹结构一起使用

-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| src/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| public/
------| store/
------| server/
------| app.config.ts
------| app.vue
------| error.vue

ssr

是否启用 HTML 的渲染 - 以动态方式（在服务器模式下）或在生成时。如果设置为 false，则生成的页面将不包含内容。

类型: boolean
默认值：true

telemetry

手动禁用 Nuxt 遥测。

参见: Nuxt 遥测以获取更多信息。

test

您的应用程序是否正在进行单元测试。

类型: boolean
默认值: false

theme

从本地或远程源扩展项目。

值应为指向源目录或相对于当前配置的配置文件路径的字符串。您可以使用 github:、gitlab:、bitbucket: 或 https:// 从远程 Git 存储库扩展。

类型: string
默认值：null

typescript

Nuxt 的 TypeScript 集成的配置。

`builder`

要为您的项目包含哪些构建器类型。

默认情况下，Nuxt 根据您的 builder 选项（默认为 'vite') 推断此值，但您可以关闭构建器环境类型（使用 false）来完全自己处理此问题，或者选择 'shared' 选项。对于模块作者，建议使用 'shared' 选项，他们希望支持多个可能的构建器。

默认值：null

`hoist`

要为 compilerOptions.paths 中的模块生成深度别名。这目前不支持子路径。在使用 pnpm monorepo 中的 Nuxt 且 shamefully-hoist=false 时，可能需要这样做。

类型: array
默认值

[
  "nitropack/types",
  "nitropack",
  "defu",
  "h3",
  "consola",
  "ofetch",
  "@unhead/vue",
  "@nuxt/devtools",
  "vue",
  "@vue/runtime-core",
  "@vue/compiler-sfc",
  "vue-router",
  "vue-router/auto-routes",
  "unplugin-vue-router/client",
  "@nuxt/schema",
  "nuxt"
]

`includeWorkspace`

在 Nuxt 项目中包含父工作区。主要对主题和模块作者有用。

类型: boolean
默认值: false

`shim`

生成一个 *.vue shim。

我们建议改为让官方 Vue 扩展为您的组件生成准确的类型。请注意，如果您正在使用其他库（例如 ESLint）无法理解 .vue 文件类型的库，您可能希望将其设置为 true。

类型: boolean
默认值: false

`strict`

TypeScript 带有一些检查，可以为您提供更多程序的安全性和分析。将您的代码库转换为 TypeScript 后，您可以开始启用这些检查以获得更高的安全性。了解更多

类型: boolean
默认值：true

`tsConfig`

您可以使用此选项扩展生成的 .nuxt/tsconfig.json。

类型: object
默认值

{
  "compilerOptions": {}
}

`typeCheck`

启用构建时类型检查。

如果设置为 true，这将在开发中进行类型检查。您可以将其限制为构建时类型检查，方法是将其设置为 build。需要安装 typescript 和 vue-tsc 作为开发依赖项。

类型: boolean
默认值: false

参见: Nuxt TypeScript 文档

unhead

一个允许我们配置 unhead Nuxt 模块的对象。

`renderSSRHeadOptions`

将传递给 renderSSRHead 以自定义输出的对象。

类型: object
默认值

{
  "omitLineBreaks": false
}

参见: unhead 选项文档

示例:

export default defineNuxtConfig({
 unhead: {
  renderSSRHeadOptions: {
   omitLineBreaks: true
  }
})

vite

将直接传递给 Vite 的配置。

参见: Vite 配置文档以获取更多信息。请注意，并非所有 Vite 选项都受 Nuxt 支持。

`build`

`assetsDir`

类型: string
默认值: "_nuxt/"

`emptyOutDir`

类型: boolean
默认值: false

`cacheDir`

类型: string
默认值: "/<rootDir>/node_modules/.cache/vite"

`clearScreen`

类型: boolean
默认值：true

`define`

类型: object
默认值

{
  "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
  "process.dev": false,
  "import.meta.dev": false,
  "process.test": false,
  "import.meta.test": false
}

`esbuild`

`jsxFactory`

类型: string
默认值: "h"

`jsxFragment`

类型: string
默认值: "Fragment"

`tsconfigRaw`

类型: string
默认值: "{}"

`mode`

类型: string
默认值: "production"

`optimizeDeps`

`exclude`

类型: array
默认值

[
  "vue-demi"
]

`publicDir`

类型: boolean
默认值: false

`resolve`

`extensions`

类型: array
默认值

[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

`root`

类型: string
默认值: "/<srcDir>"

`server`

`fs`

`allow`

类型: array
默认值

[
  "/<rootDir>/.nuxt",
  "/<srcDir>",
  "/<rootDir>",
  "/<workspaceDir>",
  "/<rootDir>/node_modules"
]

`vue`

`features`

`propsDestructure`

类型: boolean
默认值：true

`isProduction`

类型: boolean
默认值：true

`script`

`hoistStatic`

`template`

`compilerOptions`

类型: object

`transformAssetUrls`

类型: object
默认值

{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

`vueJsx`

类型: object

vue

Vue.js 配置

`compilerOptions`

将在构建时传递给 Vue 编译器的选项。

参见: Vue 文档

`propsDestructure`

为 defineProps 启用反应式解构。

类型: boolean
默认值：true

`runtimeCompiler`

在运行时捆绑包中包含 Vue 编译器。

类型: boolean
默认值: false

`transformAssetUrls`

`image`

类型: array
默认值

[
  "xlink:href",
  "href"
]

`img`

类型: array
默认值

[
  "src"
]

`source`

类型: array
默认值

[
  "src"
]

`use`

类型: array
默认值

[
  "xlink:href",
  "href"
]

`video`

类型: array
默认值

[
  "src",
  "poster"
]

watch

watch 属性允许您定义更改时将重新启动 Nuxt 开发服务器的模式。

它是一个字符串或正则表达式的数组。字符串应为绝对路径或相对于 srcDir（以及任何层的 srcDir）。正则表达式将与相对于项目 srcDir（以及任何层的 srcDir）的路径匹配。

类型: array

类型: boolean
默认值：true

类型: number
默认值: 1000

webpack

`aggressiveCodeRemoval`

硬替换 typeof process、typeof window 和 typeof document 以树状抖动捆绑包。

类型: boolean
默认值: false

`analyze`

Nuxt 使用 webpack-bundle-analyzer 来可视化您的捆绑包以及如何优化它们。

设置为 true 以启用捆绑包分析，或传递一个包含选项的对象：用于 Webpack 或用于 Vite。

类型: object
默认值

{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

示例:

analyze: {
  analyzerMode: 'static'
}

`cssSourceMap`

启用 CSS 源映射支持（在开发中默认为 true）。

类型: boolean
默认值: false

`devMiddleware`

参见 webpack-dev-middleware 以获取可用选项。

`stats`

类型: string
默认值: "none"

`experiments`

配置 webpack 实验

`extractCSS`

启用公共 CSS 提取。

在幕后使用 mini-css-extract-plugin，您的 CSS 将被提取到单独的文件中，通常每个组件一个文件。这允许分别缓存您的 CSS 和 JavaScript。

类型: boolean
默认值：true

示例:

export default {
  webpack: {
    extractCSS: true,
    // or
    extractCSS: {
      ignoreOrder: true
    }
  }
}

示例:

export default {
  webpack: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}

`filenames`

自定义捆绑包文件名。

要更深入地了解清单的使用，请查看 webpack 文档。

注意: 在生产环境中使用非哈希文件名时要小心，因为大多数浏览器都会缓存资产并且不会在第一次加载时检测到更改。

示例:

filenames: {
  chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js')
}

`app`

类型: function

`chunk`

类型: function

`css`

类型: function

`font`

类型: function

`img`

类型: function

`video`

类型: function

`friendlyErrors`

设置为 false 以禁用 FriendlyErrorsWebpackPlugin 提供的覆盖层。

类型: boolean
默认值：true

`esModule`

类型: boolean
默认值: false

`importLoaders`

类型: number
默认值: 0

`url`

`filter`

类型: function

`cssModules`

`esModule`

类型: boolean
默认值: false

`importLoaders`

类型: number
默认值: 0

`modules`

`localIdentName`

类型: string
默认值: "[local]_[hash:base64:5]"

`url`

`filter`

类型: function

`esbuild`

参见: esbuild 加载程序

`jsxFactory`

类型: string
默认值: "h"

`jsxFragment`

类型: string
默认值: "Fragment"

`tsconfigRaw`

类型: string
默认值: "{}"

`file`

参见: file-loader 选项

默认值:

{ esModule: false }

`esModule`

类型: boolean
默认值: false

`fontUrl`

参见: file-loader 选项

默认值:

{ esModule: false, limit: 1000  }

`esModule`

类型: boolean
默认值: false

`limit`

类型: number
默认值: 1000

`imgUrl`

参见: file-loader 选项

默认值:

{ esModule: false, limit: 1000  }

`esModule`

类型: boolean
默认值: false

`limit`

类型: number
默认值: 1000

`less`

默认值

{
  "sourceMap": false
}

参见: less-loader 选项

`pugPlain`

参见: pug 选项

`sass`

参见: sass-loader 选项

默认值:

{
  sassOptions: {
    indentedSyntax: true
  }
}

`sassOptions`

`indentedSyntax`

类型: boolean
默认值：true

`scss`

默认值

{
  "sourceMap": false
}

参见: sass-loader 选项

`stylus`

默认值

{
  "sourceMap": false
}

参见: stylus-loader 选项

`vue`

参见 vue-loader 以获取可用选项。

类型: object
默认值

{
  "transformAssetUrls": {},
  "compilerOptions": {},
  "propsDestructure": {}
}

`vueStyle`

默认值

{
  "sourceMap": false
}

`optimization`

配置 webpack 优化。

`minimize`

将 minimize 设置为 false 以禁用所有最小化程序。（默认情况下在开发中禁用）。

类型: boolean
默认值：true

`minimizer`

您可以将 minimizer 设置为自定义插件数组。

`runtimeChunk`

类型: string
默认值: "single"

`splitChunks`

`automaticNameDelimiter`

类型: string
默认值: "/"

`cacheGroups`

`chunks`

类型: string
默认值: "all"

`optimizeCSS`

OptimizeCSSAssets 插件选项。

当启用 extractCSS 时默认为 true。

类型: boolean
默认值: false

参见: css-minimizer-webpack-plugin 文档。

`plugins`

添加 webpack 插件。

类型: array

示例:

import webpack from 'webpack'
import { version } from './package.json'
// ...
plugins: [
  new webpack.DefinePlugin({
    'process.VERSION': version
  })
]

`postcss`

自定义 PostCSS 加载程序。与 postcss-loader 选项相同的选项

`postcssOptions`

`config`

`plugins`

类型: object
默认值

{
  "autoprefixer": {},
  "cssnano": {}
}

`profile`

在 webpackbar 中启用探查器。

它通常由 CLI 参数 --profile 启用。

类型: boolean
默认值: false

参见: webpackbar。

`serverURLPolyfill`

要加载的 polyfill 库以提供 URL 和 URLSearchParams。

默认为 'url'（参见包）。

类型: string
默认值: "url"

`warningIgnoreFilters`

隐藏构建警告的过滤器。

类型: array

workspaceDir

定义应用程序的工作区目录。

通常在 monorepo 设置中使用。Nuxt 将尝试自动检测您的工作区目录，但您可以在此处覆盖它。通常不需要配置此选项。

类型: string
默认值: "/<workspaceDir>"

导入元数据

使用 `import.meta` 了解代码运行的位置。

获取帮助

我们是一个友好的开发者社区，我们很乐意提供帮助。