通过 100+ 条技巧学习 Nuxt!

Nuxt 配置

探索您可以在 nuxt.config.ts 文件中使用的所有选项。
此文件是从 Nuxt 源代码自动生成的。

alias

您可以通过定义额外的别名来改进您的 DX,以访问 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)。这是在构建时设置的,不应在运行时自定义。

  • 类型: 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> 的默认配置。

  • 类型: 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 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

视图过渡的默认值。

只有在您的 nuxt.config 文件中启用了对视图过渡的实验性支持时,此设置才有效 。这可以通过在单个页面上使用 definePageMeta 来覆盖。

  • 类型: boolean
  • 默认值: false

查看: Nuxt 视图过渡 API 文档

appConfig

额外的应用配置

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

nuxt

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
  • 默认值: "f821a3c1-36b1-497c-9729-024dda51b42b"

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: [
  // 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

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
  • 默认值: "https://127.0.0.1:3000"

devServerHandlers

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

  • 类型: array

查看: Nitro 服务器路由文档

devtools

启用用于开发的 Nuxt DevTools。

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

查看: Nuxt DevTools 了解更多信息。

dir

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

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

app

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

assets

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"

experimental

appManifest

使用应用程序清单来遵循客户端的路由规则。

  • 类型: boolean
  • 默认值: true

asyncContext

启用本机异步上下文以供嵌套的组合式函数访问

  • 类型: boolean
  • 默认值: false

查看: Nuxt PR #20918

asyncEntry

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

  • 类型: boolean
  • 默认值: false

browserDevtoolsTiming

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

  • 类型: boolean
  • 默认值: false

参考: Chrome DevTools 可扩展性 API

buildCache

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

这仅适用于您的应用程序 Vue/Nitro 部分的 srcDirserverDir 中的源文件。

  • 类型: boolean
  • 默认值: false

checkOutdatedBuildInterval

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

设置为 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/ 目录中。

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

externalVue

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

  • 类型: boolean
  • 默认值: true

参考: Nuxt Issue #13632

extraPageMetaExtractionKeys

配置在使用 scanPageMeta 时从页面元数据中提取的其他键。

这允许模块从页面元数据访问其他元数据。建议使用您的键来扩充 NuxtPage 类型。

  • 类型: array

headNext

使用新的实验性 head 优化

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

参考: Nuxt Discussion #22632

inlineRouteRules

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

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

  • 类型: boolean
  • 默认值: false

localLayerAliases

解析位于层内的 ~~~@@@ 别名,并考虑其层源和根目录。

  • 类型: boolean
  • 默认值: true

在导航前等待单个动画帧,这为浏览器重新绘制提供了机会,从而确认用户交互。

在预渲染的路由上导航时,它可以减少 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

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

示例:

// 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}`)
})

spaLoadingTemplateLocation

保持显示 spa-loading-template 直到 suspense:resolve

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

参考: Nuxt Issues #24770

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

启用与客户端路由器集成 View Transition API。

  • 类型: boolean
  • 默认值: false

参考: View Transitions 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 的行为(请参阅示例)。如果遇到问题,请提交 issue,以便我们可以在 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

参阅TypeScript PR 实现 bundler 模块解析

generate

exclude

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

  • 类型: array

routes

要生成的路由。

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

  • 类型: array

示例:

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

hooks

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

在内部,hooks 遵循使用冒号的命名模式(例如,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 数组中指定的 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}",
  ".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: {
  // Auto-import pinia stores defined in `~/stores`
  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 尝试使用节点 require 路径(在 node_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 的 resolveLoadingnodeExternalspostcss)。

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

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

示例:

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

nitro

Nitro 的配置。

参阅Nitro 配置文档

routeRules

  • 类型: object

runtimeConfig

  • 类型: object
  • 默认值
{
  "public": {},
  "app": {
    "buildId": "f821a3c1-36b1-497c-9729-024dda51b42b",
    "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/ 目录,它将被启用。

  • 类型: boolean

plugins

nuxt 应用插件数组。

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

  • 类型: 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 应用上下文。

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

  • 类型: object
  • 默认值
{
  "public": {},
  "app": {
    "buildId": "f821a3c1-36b1-497c-9729-024dda51b42b",
    "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/ 目录文档

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

示例:

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

sourcemap

配置是否以及如何为服务器和/或客户端捆绑包生成 sourcemap。

如果设置为单个布尔值,则该值同时应用于服务器和客户端。此外,'hidden' 选项也适用于服务器和客户端。客户端和服务器的可用选项: - true:生成 sourcemap 并在最终捆绑包中包含源引用。 - false:不生成任何 sourcemap。 - 'hidden':生成 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 图像。一些好的微调器来源是 SpinKitSVG 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

主题

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

值应该是一个指向相对于当前配置的源目录或配置路径的字符串。你可以使用 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/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 扩展为你的组件生成准确的类型。请注意,如果你使用其他库(如 ESLint),并且它们无法理解 .vue 文件的类型,你可能希望将此项设置为 true

  • 类型: boolean
  • 默认值: false

strict

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

  • 类型: boolean
  • 默认值: true

tsConfig

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

  • 类型: object
  • 默认值
{
  "compilerOptions": {}
}

typeCheck

启用构建时类型检查。

如果设置为 true,将在开发期间进行类型检查。你可以通过将其设置为 build 来限制为构建时类型检查。需要安装 typescriptvue-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 文档

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 中覆盖 watchers 配置。

chokidar

直接传递给 chokidar 的选项。

查看chokidar

ignoreInitial

  • 类型: 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 source map 支持(在开发中默认为 true)。

  • 类型: boolean
  • 默认值: false

devMiddleware

有关可用选项,请参阅 webpack-dev-middleware

stats

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

experiments

配置 webpack experiments

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

hotMiddleware

有关可用选项,请参阅 webpack-hot-middleware

loaders

自定义 Nuxt 集成 webpack loader 的选项。

css

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 loader

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 optimization

minimize

将 minimize 设置为 false 以禁用所有 minimizer。(默认情况下,在开发中禁用)。

  • 类型: 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 Loader。与 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>"