Nuxt 配置

探索可在 nuxt.config.ts 文件中使用的所有选项。

alias

您可以通过定义额外的别名来改善开发体验,从而在 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),您 必须 在别名前添加 ~ 前缀。
注意: 这些别名会自动添加到生成的 TypeScript 配置文件(.nuxt/tsconfig.app.json.nuxt/tsconfig.server.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))
  }
}
<template>
  <img src="~images/main-bg.jpg">
</template>

<script>
import data from 'data/test.json'
</script>

<style>
// 取消以下注释
//@import '~style/variables.scss';
//@import '~style/utils.scss';
//@import '~style/base.scss';
body {
  background-image: url('~images/main-bg.jpg');
}
</style>

analyzeDir

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

如果指定的是相对路径,则相对于 rootDir

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

app

Nuxt 应用的配置。

baseURL

Nuxt 应用的基础路径。

例如:

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

示例:

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

也可以通过设置 NUXT_APP_BASE_URL 环境变量在运行时配置。

示例:

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

buildAssetsDir

构建的站点资产的文件夹名称,相对于 baseURL(或 cdnURL 如果已设置)。此选项在构建时设置,不应在运行时修改。

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

cdnURL

用于提供公共文件夹的绝对 URL(仅限生产环境)。

例如:

  • 类型: string
  • 默认值: ""

示例:

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

可以通过设置 NUXT_APP_CDN_URL 环境变量在运行时设置为不同的值。

示例:

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

为每个页面设置默认的 <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' }
    ],
    // 请注意,此区域可能会发生变化
    style: [
      // <style>:root { color: red }</style>
      { textContent: ':root { color: red }' }
    ],
    noscript: [
      // <noscript>JavaScript is required</noscript>
      { textContent: 'JavaScript is required' }
    ]
  }
}

keepalive

页面间 KeepAlive 配置的默认值。

可以通过在单个页面上使用 definePageMeta 覆盖此配置。仅允许 JSON 可序列化的值。

  • 类型: boolean
  • 默认值: false

参见: Vue KeepAlive

layoutTransition

布局转换的默认值。

可以通过在单个页面上使用 definePageMeta 覆盖此配置。仅允许 JSON 可序列化的值。

  • 类型: boolean
  • 默认值: false

参见: Vue Transition 文档

pageTransition

页面转换的默认值。

可以通过在单个页面上使用 definePageMeta 覆盖此配置。仅允许 JSON 可序列化的值。

  • 类型: boolean
  • 默认值: false

参见: Vue Transition 文档

rootAttrs

自定义 Nuxt 根元素的 ID。

  • 类型: object
  • 默认值
{
  "id": "__nuxt"
}

rootId

自定义 Nuxt 根元素的 ID。

  • 类型: string
  • 默认值: "__nuxt"

rootTag

自定义 Nuxt 根元素的标签。

  • 类型: string
  • 默认值: "div"

spaLoaderAttrs

自定义 Nuxt SpaLoader 元素的属性。

id

  • 类型: string
  • 默认值: "__nuxt-loader"

spaLoaderTag

自定义 Nuxt SpaLoader 元素的标签。

  • 类型: string
  • 默认值: "div"

teleportAttrs

自定义 Nuxt Teleport 元素的属性。

  • 类型: object
  • 默认值
{
  "id": "teleports"
}

teleportId

自定义 Nuxt Teleport 元素的 ID。

  • 类型: string
  • 默认值: "teleports"

teleportTag

自定义 Nuxt Teleport 元素的标签。

  • 类型: string
  • 默认值: "div"

viewTransition

视图转换的默认值。

仅在 Facetune 配置文件中启用了实验性视图转换支持时生效。 可以通过在单个页面上使用definePageMeta` 覆盖此配置。

  • 类型: boolean
  • 默认值: false

参见: Nuxt 视图转换 API 文档

appConfig

额外的应用配置。

为了便于程序化使用和类型支持,您可以通过此选项直接提供应用配置。它将与 app.config 文件合并作为默认值。

nuxt

appId

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

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

build

共享构建配置。

analyze

Nuxt 允许可视化您的打包内容以及如何优化它们 Aldo。

设置为 true 以启用打包分析,或传递一个包含选项的对象:适用于 webpack适用于 vite

  • 类型: object
  • 默认值
{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

示例:

analyze: {
  analyzerMode: 'static'
}

templates

建议使用 @nuxt/kitaddTemplate 而不是此选项。

  • 类型: array

示例:

templates: [
  {
    src: '~/modules/support/plugin.js', // `src` 可以是绝对或相对路径
    dst: 'support.js', // `dst` 相对于项目的 `.nuxt` 目录
  }
]

transpile

如果您希望使用 Babel 转译特定的依赖项,可以在此处添加它们。转译项可以是包名称、函数、字符串或匹配依赖项文件名的正则表达式对象。

您还可以使用函数进行条件转译。函数将接收一个对象({ isDev, isServer, isClient, isModern, isLegacy })。

  • 类型: array

示例:

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

buildDir

定义 Nuxt 构建文件存放的目录。

许多工具假定 .nuxt 是一个隐藏目录(因为它以 . 开头)。如果这有问题,您可以使用此选项避免这种情况。

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

示例:

export default {
  buildDir: 'nuxt-build'
}

buildId

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

  • 类型: string
  • 默认值: "4a2e2d30-418f-41df-8e58-ed5df06de7fd"

builder

用于打包应用程序 Vue 部分的构建器。

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

compatibilityDate

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

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

components

配置 Nuxt 组件的自动注册。

在此处配置的目录中的任何组件都可以在页面、布局(和其他组件)中直接使用,无需显式导入。

  • 类型: object
  • 默认值
{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

参见: components/ 目录文档

css

您可以定义希望全局设置的 CSS 文件/模块/库(包含在每个页面中)。

Nuxt 将根据文件扩展名自动猜测文件类型并使用适当的预处理器。如果需要使用它们,您仍需安装所需的加载器。

  • 类型: array

示例:

css: [
  // 直接加载 Node.js 模块(这里是一个 Sass 文件)
  'bulma',
  // 项目中的 CSS 文件
  '~/assets/css/main.css',
  // 项目中的 SCSS 文件
  '~/assets/css/main.scss'
]

debug

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

目前,它会在服务器上打印钩子名称和时间,并在浏览器中记录钩子参数。 您也可以设置一个对象以启用特定的调试选项。

  • 类型: boolean
  • 默认值: false

dev

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

通常,您无需设置此选项。

  • 类型: boolean
  • 默认值: false

devServer

cors

为开发服务器设置 CORS 选项。

origin

  • 类型: array
  • 默认值
[
  {}
]

host

开发服务器监听的主机。

https

是否启用 HTTPS。

  • 类型: boolean
  • 默认值: false

示例:

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

loadingTemplate

显示加载屏幕的模板。

  • 类型: function

port

开发服务器监听的端口。

  • 类型: number
  • 默认值: 3000

url

监听开发服务器的 URL。

不应直接设置此选项,因为它始终会被开发服务器的完整 URL 覆盖(用于模块和内部使用)。

  • 类型: string
  • 默认值: "http://localhost:3000"

devServerHandlers

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

  • 类型: array

参见: Nitro 服务器路由文档

devtools

为开发启用 Nuxt DevTools。

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

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

dir

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

除非必要,否则最好坚持使用默认值。

app

  • 类型: string
  • 默认值: "app"

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"

static

  • 类型: string
  • 默认值: "public"

esbuild

options

配置 Nuxt 内部使用的共享 esbuild 选项,并传递给其他构建器,例如 Vite 或 webpack。

jsxFactory

  • 类型: string
  • 默认值: "h"

jsxFragment

  • 类型: string
  • 默认值: "Fragment"

target

  • 类型: string
  • 默认值: "esnext"

tsconfigRaw

  • 类型: object

experimental

alwaysRunFetchOnKeyChange

当键发生变化时,是否运行 useFetch,即使它被设置为 immediate: false 且尚未触发。

如果 immediate: true 或已触发,useFetchuseAsyncData 将在键发生变化时始终运行。

  • 类型: boolean
  • 默认值: true

appManifest

在客户端使用应用清单以遵循路由规则。

  • 类型: boolean
  • 默认值: true

asyncContext

启用原生异步上下文以供嵌套可组合项访问。

  • 类型: boolean
  • 默认值: false

参见: Nuxt PR #20918

asyncEntry

设置为 true 以生成 Vue 包的异步入口点(支持模块联合)。

  • 类型: boolean
  • 默认值: false

browserDevtoolsTiming

在基于 Chromium 的浏览器的性能面板中启用 Nuxt 应用钩子的计时。

此功能为 Nuxt 钩子添加性能标记,允许您在浏览器的性能选项卡中跟踪其执行时间。这对于调试性能问题特别有用。

  • 类型: boolean
  • 默认值: false

示例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // 在浏览器开发者工具中启用 Nuxt 钩子的性能标记
    browserDevtoolsTiming: true
  }
})

参见: PR #29922

参见: Chrome 开发者工具性能 API

buildCache

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

仅适用于 srcDirserverDir 中的源文件的 Vue/Nitro 部分。

  • 类型: boolean
  • 默认值: false

checkOutdatedBuildInterval

设置检查新构建的时间间隔(以毫秒为单位)。当 experimental.appManifestfalse 时禁用。

设置为 false 以禁用。

  • 类型: number
  • 默认值: 3600000

clientFallback

是否启用实验性的 <NuxtClientFallback> 组件,以便在 SSR 出错时在客户端上渲染内容。

  • 类型: boolean
  • 默认值: false

clientNodeCompat

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

  • 类型: boolean
  • 默认值: false

参见: unenv

注意: 要使全局变量(如 Buffer)在浏览器中工作,您需要手动注入它们。

import { Buffer } from 'node:buffer'

globalThis.Buffer = globalThis.Buffer || Buffer

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 的引用值。

  • 类型: boolean
  • 默认值: true

参见: CookieStore

crossOriginPrefetch

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

  • 类型: boolean
  • 默认值: false

debugModuleMutation

记录模块上下文中对 nuxt.options 的更改,有助于调试 Nuxt 初始化阶段模块所做的配置更改。

启用后,Nuxt 将跟踪哪些模块修改了配置选项,便于追踪意外的配置更改。

  • 类型: boolean
  • 默认值: false

示例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // 启用模块对配置更改的跟踪
    debugModuleMutation: true
  }
})

参见: PR #30555

decorators

启用 Nuxt 和 Nitro 的实验性装饰器。

  • 类型: boolean
  • 默认值: false

参见: https://github.com/tc39/proposal-decorators

defaults

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

这些选项将来可能会移动到其他地方,例如 app.configapp/ 目录。

componentName
  • 类型: string
  • 默认值: "NuxtLink"
prefetch
  • 类型: boolean
  • 默认值: true
prefetchOn
visibility
  • 类型: boolean
  • 默认值: true

useAsyncData

适用于 useAsyncData(以及 useFetch)的选项。

deep
  • 类型: boolean
  • 默认值: true
errorValue
  • 类型: string
  • 默认值: "null"
value
  • 类型: string
  • 默认值: "null"

useFetch

emitRouteChunkError

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

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

  • 类型: string
  • 默认值: "automatic"

参见: Nuxt PR #19038

enforceModuleCompatibility

Nuxt 是否应在模块不兼容时停止。

  • 类型: boolean
  • 默认值: false

externalVue

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

  • 类型: boolean
  • 默认值: true

参见: Nuxt Issue #13632

extraPageMetaExtractionKeys

在使用 scanPageMeta 时配置要提取的额外页面元数据键。

这允许模块访问页面元数据的额外元数据。建议使用您的键增强 NuxtPage 类型。

  • 类型: array

granularCachedData

是否在手动刷新 useAsyncDatauseFetch 时调用并使用 getCachedData 的结果。

  • 类型: boolean
  • 默认值: false

institución

使用新的实验性头部优化:

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

参见: Nuxt Discussion #22632

inlineRouteRules

允许在 ~/pages 目录中使用 defineRouteRules 直接定义路由规则。

规则将根据路径转换为服务器请求。例如,在 ~/pages/foo/bar.vue 中定义的规则将应用于 /foo/bar 请求。在 ~/pages/foo/[id].vue 中的规则将应用于 /foo/** 请求。 如需更多控制,例如使用自定义 pathalias 在页面的 definePageMeta 中设置,您应直接在 nuxt.config 中设置 routeRules

  • 类型: boolean
  • 默认值: false

lazyHydration

<Lazy> 组件启用自动水合策略配置。

此功能根据可见性、空闲时间或其他触发器智能确定何时水合延迟组件,以通过推迟不必要组件的水合来提高性能。

  • 类型: boolean
  • 默认值: true

示例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    lazyHydration: true // 为延迟组件启用智能水合策略
  }
})

// 在您的 Vue 组件中
<template>
  <Lazy>
    <ExpensiveComponent />
  </Lazy>
</template>

参见: PR #26468

localLayerAliases

相对于层源和根目录解析 ~~~@@@ 别名。

  • 类型: boolean
  • 默认值: true

在导航前等待单个动画帧,以便浏览器有机会重绘,确认用户交互。

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

  • 类型: boolean
  • 默认值: true

noVueServer

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

  • 类型: boolean
  • 默认值: false

normalizeComponentNames

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

  • 类型: boolean
  • 默认值: false

parseErrorData

在渲染服务器错误页面时是否解析 error.data

  • 类型: boolean
  • 默认值: false

payloadExtraction

启用后(默认情况下),将提取预渲染页面的有效负载。

  • 类型: boolean
  • 默认值: true

pendingWhenIdle

对于 useAsyncDatauseFetch,当数据尚未开始获取时,pending 是否应为 true

  • 类型: boolean
  • 默认值: true

polyfillVueUseHead

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

禁用此功能可减少约 0.5kb 的客户端包大小。

  • 类型: boolean
  • 默认值: false

purgeCachedData

在路由导航时是否清理 Nuxt 静态和异步数据缓存。

Nuxt 将自动清理 useAsyncDatanuxtApp.static.data 的缓存数据。这有助于防止内存泄漏并确保按需加载新数据,但可以禁用此功能。

  • 类型: boolean
  • 默认值: true

示例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // 禁用自动缓存清理(默认为 true)
    purgeCachedData: false
  }
})

参见: PR #31379

relativeWatchPaths

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

此标志将在 v4 发布时移除,仅用于 Nuxt v3.12+ 或 夜间发布频道 的高级测试。

  • 类型: boolean
  • 默认值: true

renderJsonPayloads

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

  • 类型: boolean
  • 默认值: true

resetAsyncDataToUndefined

clearclearNuxtData 是否应将异步数据重置为其 默认 值或更新为 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

在预渲染的页面之间自动共享有效负载 数据。在预渲染使用 useAsyncDatauseFetch 并在不同页面中获取相同数据的站点时,这可以显著提高性能。

启用此功能时,特别重要的是确保数据的唯一键始终可以解析为相同的数据。例如,如果您使用 useAsyncData 获取与特定页面相关的数据,您应该提供一个唯一标识该数据的键。(useFetch 应该会为您自动执行此操作。)

  • 类型: boolean
  • 默认值: false

示例:

// 这在一个动态页面(例如 `[slug].vue`)中是不安全的,因为路由 slug 会影响获取的数据,但 Nuxt 无法知道这一点,因为它未反映在键中。
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})
// 相反,您应该使用一个唯一标识所获取数据的键。
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

spaLoadingTemplateLocation

在 suspense:resolve 前持续显示 spa-loading-template。

  • 类型: string
  • 默认值: "within"

参见: Nuxt Issues #24770

templateImportResolution

禁用从添加模板的模块路径解析 Nuxt 模板中的导入。

默认情况下,Nuxt 会尝试相对于添加模板的模块解析模板中的导入。将其设置为 false 将禁用此行为,这在某些环境中遇到解析冲突时可能有用。

  • 类型: boolean
  • 默认值: true

示例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // 禁用模块路径的模板导入解析
    templateImportResolution: false
  }
})

参见: PR #31175

templateRouteInjection

默认情况下,由自动导入的 useRoute() 可组合项返回的路由对象与 <NuxtPage> 中的当前页面保持同步。这对于 vue-router 导出的 useRoute 或 Vue 模板中默认的 $route 对象不适用。

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

  • 类型: boolean
  • 默认值: true

templateUtils

在编译 Nuxt 模板时是否提供旧的 templateUtils 对象(包含 serializeimportNameimportSources)。

此标志将在 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

在使用 node 服务器时写入早期提示。

  • 类型: boolean
  • 默认值: false
注意: 当前版本的 nginx 不支持 103 早期提示。

extends

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

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

参见: 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 更精细地禁用脚本。

如果设置为 'production' 或 true,仅在生产模式下禁用 JS。

  • 类型: boolean
  • 默认值: false

future

future 用于提前选择将成为框架未来(可能是主要)版本默认功能的新功能。

compatibilityVersion

用于启用 Nuxt 功能或标志的早期访问。

在 Nuxt 4 中尚未可配置,但一旦我们开始合并 v5 的重大更改,就可以启用它。

multiApp

启用实验性多应用支持的早期访问。

  • 类型: boolean
  • 默认值: false

参见: Nuxt Issue #21635

typescriptBundlerResolution

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

它改进了使用带有 exports 的现代库的类型支持。 您可以将其设置为 false 以使用 TypeScript 的默认旧版 'Node' 模式。

  • 类型: boolean
  • 默认值: true

参见: TypeScript PR 实现 bundler 模块解析

hooks

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

在内部,钩子遵循使用冒号的命名模式(例如,build:done)。 为了便于配置,您也可以在 nuxt.config 中将它们结构化为层次对象(如下所示)。

示例:

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 数组中指定的 glob 模式的文件将在构建过程中被忽略。

  • 类型: 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}",
  "**/*.sock",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

直接传递给 node-ignore 的选项(Nuxt 用于忽略文件)。

参见: node-ignore

示例:

ignoreOptions: {
  ignorecase: false
}

ignorePrefix

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

  • 类型: string
  • 默认值: "-"

imports

配置 Nuxt 如何自动导入可组合项到您的应用中。

参见: Nuxt 文档

dirs

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

  • 类型: array

示例:

imports: {
  // 自动导入 `~/stores` 中定义的 pinia 存储
  dirs: ['stores']
}

global

  • 类型: boolean
  • 默认值: false

scan

是否扫描您的 composables/utils/ 目录以自动导入可组合项。由 Nuxt 或其他模块注册的自动导入,例如来自 vuenuxt 的导入,仍将启用。

  • 类型: boolean
  • 默认值: true

logLevel

构建日志时的日志级别。

在 CI 中运行或没有可用的 TTY 时,默认为 'silent'。此选项在 Vite 中用作 'silent',在 webpack 中用作 'none'。

  • 类型: string
  • 默认值: "info"

modules

模块是扩展 Nuxt 核心功能并添加无限集成的 Nuxt 扩展。

每个模块可以是一个字符串(可以是包名称或文件的路径),一个包含模块作为第一个字符串和选项作为第二个对象的元组,或者一个内联模块函数。 Nuxt 尝试使用 node require 路径(在 node_modules 中)解析模块数组中的每个项目,然后如果使用 ~ 别名,将从项目的 srcDir 解析。

  • 类型: array
注意: 模块按顺序执行,因此顺序很重要。首先加载 nuxt.config.ts 中定义的模块,然后按字母顺序执行 modules/ 目录中的模块。

示例:

modules: [
  // 使用包名称
  '@nuxtjs/axios',
  // 相对于项目 srcDir
  '~/modules/awesome.js',
  // 提供选项
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // 内联定义
  function () {}
]

modulesDir

用于设置模块目录的路径解析(例如,webpack 的 resolveLoadingnodeExternalspostcss)。

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

  • 类型: array
  • 默认值
[
  "/<rootDir>/node_modules"
]

示例:

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

nitro

Nitro 的配置。

参见: Nitro 配置文档

routeRules

  • 类型: object

runtimeConfig

  • 类型: object
  • 默认值
{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "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": "callOnce",
    "argumentLength": 3
  },
  {
    "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

从服务器或客户端构建中移除可组合项。

示例:

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"
  ]
}

pages

是否使用 Nuxt 3 的 vue-router 集成。如果您未提供值,且源文件夹中有 pages/ 目录,则默认启用。

此外,您可以提供一个 glob 模式或模式数组,仅扫描特定页面文件。

示例:

pages: {
  pattern: ['**\/*\/*.vue', '!**\/*.spec.*'],
}

plugins

Nuxt 应用插件的数组。

每个插件可以是一个字符串(可以是文件的绝对或相对路径)。如果以 .client.server 结尾,则仅在适当的上下文中自动加载。 它也可以是一个带有 srcmode 键的对象。

  • 类型: array
注意: ~/plugins 目录中的插件也会自动注册, 除非您需要自定义它们的顺序,否则无需在 nuxt.config 中列出它们。所有插件都通过其 src 路径去重。

参见: plugins/ 目录文档

示例:

plugins: [
  '~/plugins/foo.client.js', // 仅在客户端
  '~/plugins/bar.server.js', // 仅在服务器端
  '~/plugins/baz.js', // 客户端和服务器端
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // 仅在客户端
  { src: '~/plugins/server-only.js', mode: 'server' } // 仅在服务器端
]

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 的额外路由器选项。Nuxt 提供了除 vue-router 选项外的其他自定义选项(见下文)。

注意: 只能通过 Nuxt 配置传递 JSON 可序列化的选项。 如需更多控制,您可以使用 router.options.ts 文件。

参见: Vue Router 文档

hashMode

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

  • 类型: boolean
  • 默认值: false

默认值: false

scrollBehaviorType

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

  • 类型: string
  • 默认值: "auto"

默认值: 'auto'

runtimeConfig

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

此对象的价值只能通过 useRuntimeConfig 在服务器上访问。 它主要应包含不暴露给前端的 私有 配置,例如 API 密钥令牌的引用。 publicapp 下的任何内容也将暴露给前端。 值会在运行时自动被匹配的环境变量替换,例如,设置环境变量 NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ 将覆盖下面示例中的两个值。

  • 类型: object
  • 默认值
{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

示例:

export default {
 runtimeConfig: {
    apiKey: '', // 默认为空字符串,在运行时使用 process.env.NUXT_API_KEY 自动设置
    public: {
       baseURL: '' // 也暴露给前端。
    }
  }
}

serverDir

定义 Nuxt 应用的服务器目录,其中存储 Nitro 路由、中间件和插件。

如果指定的是相对路径,则相对于 rootDir

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

serverHandlers

Nitro 服务器处理程序。

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

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

参见: server/ 目录文档

注意: server/apiserver/middlewareserver/routes 中的文件将由 Nuxt 自动注册。

示例:

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

sourcemap

配置是否以及如何为服务器和/或客户端包生成源映射。

如果设置为单个布尔值,该值将同时应用于服务器和客户端。此外,serverclient 还支持 'hidden' 选项。 服务器和客户端的可用选项:

  • true: 生成源映射并在最终包中包含源引用。
  • false: 不生成任何源映射。
  • 'hidden': 生成源映射但不在最终包中包含引用。
  • 类型: object
  • 默认值
{
  "server": true,
  "client": false
}

spaLoadingTemplate

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

  • 如果未设置,将使用您的一个层中的 ~/spa-loading-template.html 文件(如果存在)。
  • 如果为 false,将不加载 SPA 加载指示器。
  • 如果为 true,Nuxt 将查找您的一个层中的 ~/spa-loading-template.html 文件,或者使用默认的 Nuxt 图像。 一些好的旋转器来源包括 SpinKitSVG Spinners
  • 默认值: null

示例: ~/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
  • 默认值: "app" (Nuxt 4),"." (Nuxt 3 兼容模式 3)

示例:

export default {
  srcDir: 'app/'
}

这需要以下文件夹结构:

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

ssr

是否启用 HTML 的渲染 - 在服务器模式下动态渲染或在生成时渲染。如果设置为 false,生成的页面将没有内容。

  • 类型: boolean
  • 默认值: true

telemetry

手动禁用 Nuxt 遥测。

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

test

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

  • 类型: boolean
  • 默认值: false

theme

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

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

  • 类型: string

typescript

Nuxt 的 TypeScript 集成配置。

builder

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

Nuxt 默认根据您的 builder 选项推断此选项(默认为 'vite'),但您可以将其设置为 false 以完全自行处理,或选择 'shared' 选项。 'shared' 选项建议模块作者使用,因为他们希望支持多种可能的构建器。

  • 默认值: null

hoist

compilerOptions.paths 中为模块生成深层别名。不支持子路径。在使用 pnpm 单体仓库且 shamefully-hoist=false 时可能需要。

  • 类型: array
  • 默认值
[
  "nitropack/types",
  "nitropack/runtime",
  "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 扩展 为您的组件生成准确的类型。 请注意,如果您使用其他无法理解 .vue 文件类型的库(如 ESLint),您可能希望将其设置为 true

  • 类型: boolean
  • 默认值: false

strict

TypeScript 提供了一些检查,以提供更多的安全性和程序分析。一旦您将代码库转换为 TypeScript,您可以启用这些检查以获得更高的安全性。阅读更多

  • 类型: boolean
  • 默认值: true

tsConfig

您可以使用此选项扩展生成的 TypeScript 配置文件(.nuxt/tsconfig.app.json.nuxt/tsconfig.server.json 等)。

typeCheck

启用构建时类型检查。

如果设置为 true,将在开发中进行类型检查。您可以通过将其设置为 build 限制为仅构建时类型检查。需要安装 typescriptvue-tsc 作为开发依赖项。

  • 类型: boolean
  • 默认值: false

参见: Nuxt TypeScript 文档

unhead

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

legacy

unhead 模块启用旧版兼容模式。应用以下更改:

  • 禁用 Capo.js 排序
  • 添加 DeprecationsPlugin:支持 hidvmidchildrenbody
  • 添加 PromisesPlugin:支持作为输入的 promise
  • 类型: boolean
  • 默认值: false

参见: unhead 迁移文档

示例:

export default defineNuxtConfig({
 unhead: {
  legacy: true
 }
})

renderSSRHeadOptions

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

  • 类型: object
  • 默认值
{
  "omitLineBreaks": false
}

示例:

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

vite

直接传递给 Vite 的配置。

参见: Vite 配置文档 获取更多信息。 请注意,Nuxt 不支持所有 vite 选项。

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

  • 类型: object
  • 默认值
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

mode

  • 类型: string
  • 默认值: "production"

optimizeDeps

esbuildOptions

  • 类型: object
  • 默认值
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

exclude

  • 类型: array
  • 默认值
[
  "vue-demi"
]

publicDir

resolve

extensions

  • 类型: array
  • 默认值
[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

root

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

server

fs

allow
  • 类型: array
  • 默认值
[
  "/<rootDir>/.nuxt",
  "/<srcDir>",
  "/<rootDir>",
  "/<workspaceDir>"
]

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
  • 默认值
{
  "isCustomElement": {
    "$schema": {
      "title": "",
      "description": "",
      "tags": []
    }
  }
}

vue

Vue.js 配置。

compilerOptions

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

参见: Vue 文档

config

可以全局配置 Vue 应用。只能在 nuxt.config 中设置可序列化的选项。所有其他选项应在 Nuxt 插件中运行时设置。

参见: 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

watchers

watchers 属性允许您在 nuxt.config 中覆盖监视器配置。

chokidar

直接传递给 chokidar 的选项。

参见: chokidar

ignoreInitial

  • 类型: boolean
  • 默认值: true

ignorePermissionErrors

  • 类型: boolean
  • 默认值: true

rewatchOnRawEvents

接收到时将导致监视器重启的事件类型数组。

webpack

直接传递给 webpack 的 watchOptions

参见: webpack@4 监视选项

aggregateTimeout

  • 类型: number
  • 默认值: 1000

webpack

aggressiveCodeRemoval

硬性替换 typeof processtypeof windowtypeof 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,
    // 或
    extractCSS: {
      ignoreOrder: true
    }
  }
}

如果您希望将所有 CSS 提取到一个文件中,可以使用以下解决方法。 但请注意,不建议将所有内容提取到一个文件中。 提取到多个 CSS 文件有助于缓存和预加载隔离。它还可以提高页面性能,仅下载和解析所需的资源。

示例:

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

filenames

自定义包文件名。

要了解有关清单使用的更多信息,请查看 webpack 文档

注意: 在生产中使用非基于哈希的文件名要小心, 因为大多数浏览器会缓存资产,并且在首次加载时不会检测到更改。

此示例将花哨的块名称更改为数字 ID:

示例:

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

hotMiddleware

参见 webpack-hot-middleware 的可用选项。

loaders

自定义 Nuxt 集成的 webpack 加载器的选项。

css

参见 css-loader 的可用选项。

esModule
  • 类型: boolean
  • 默认值: false
importLoaders
  • 类型: number
  • 默认值: 0
url
filter
  • 类型: function

cssModules

参见 css-loader 的可用选项。

esModule
  • 类型: boolean
  • 默认值: false
importLoaders
  • 类型: number
  • 默认值: 0
modules
localIdentName
  • 类型: string
  • 默认值: "[local]_[hash:base64:5]"
url
filter
  • 类型: function

esbuild

  • 类型: object
  • 默认值
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

参见: esbuild loader

file

参见: file-loader 选项

默认值:

{ esModule: false }
esModule
  • 类型: boolean
  • 默认值: false
limit
  • 类型: number
  • 默认值: 1000

fontUrl

参见: file-loader 选项

默认值:

{ esModule: false }
esModule
  • 类型: boolean
  • 默认值: false
limit
  • 类型: number
  • 默认值: 1000

imgUrl

参见: file-loader 选项

默认值:

{ esModule: false }
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 的可用选项。

compilerOptions
  • 类型: object
propsDestructure
  • 类型: boolean
  • 默认值: true
transformAssetUrls
  • 类型: object
  • 默认值
{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

vueStyle

  • 默认值
{
  "sourceMap": false
}

optimization

配置 webpack 优化

minimize

将 minimize 设置为 false 以禁用所有压缩器。(在开发中默认禁用)。

  • 类型: boolean
  • 默认值: true

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

plugins
  • 类型: object
  • 默认值
{
  "autoprefixer": {},
  "cssnano": {}
}

profile

在 webpackbar 中启用分析器。

通常通过 CLI 参数 --profile 启用。

  • 类型: boolean
  • 默认值: false

参见: webpackbar

serverURLPolyfill

提供 URL 和 URLSearchParams 的 polyfill 库。

默认为 'url'参见包)。

  • 类型: string
  • 默认值: "url"

warningIgnoreFilters

隐藏构建警告的过滤器。

  • 类型: array

workspaceDir

定义您的应用的工作区目录。

通常在单体仓库设置中会使用此功能。Nuxt 会尝试自动检测您的工作区目录,但您可以在这里覆盖它。 通常无需配置此选项。

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