Nuxt 配置
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"
}
~
前缀。.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
为每个页面设置默认的 <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
pageTransition
页面转换的默认值。
可以通过在单个页面上使用 definePageMeta
覆盖此配置。仅允许 JSON 可序列化的值。
- 类型:
boolean
- 默认值:
false
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/kit
的 addTemplate
而不是此选项。
- 类型:
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
或已触发,useFetch
和 useAsyncData
将在键发生变化时始终运行。
- 类型:
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
buildCache
根据配置和源文件的哈希值缓存 Nuxt/Nitro 构建产物。
仅适用于 srcDir
和 serverDir
中的源文件的 Vue/Nitro 部分。
- 类型:
boolean
- 默认值:
false
checkOutdatedBuildInterval
设置检查新构建的时间间隔(以毫秒为单位)。当 experimental.appManifest
为 false
时禁用。
设置为 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
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.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"
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
extraPageMetaExtractionKeys
在使用 scanPageMeta
时配置要提取的额外页面元数据键。
这允许模块访问页面元数据的额外元数据。建议使用您的键增强 NuxtPage 类型。
- 类型:
array
granularCachedData
是否在手动刷新 useAsyncData
和 useFetch
时调用并使用 getCachedData
的结果。
- 类型:
boolean
- 默认值:
false
institución
使用新的实验性头部优化:
- 添加 capo.js 头部插件,以便以更高效的方式渲染头部标签。
- 使用哈希水合插件减少初始水合。
- 类型:
boolean
- 默认值:
true
inlineRouteRules
允许在 ~/pages
目录中使用 defineRouteRules
直接定义路由规则。
规则将根据路径转换为服务器请求。例如,在 ~/pages/foo/bar.vue
中定义的规则将应用于 /foo/bar
请求。在 ~/pages/foo/[id].vue
中的规则将应用于 /foo/**
请求。
如需更多控制,例如使用自定义 path
或 alias
在页面的 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
navigationRepaint
在导航前等待单个动画帧,以便浏览器有机会重绘,确认用户交互。
在预渲染路由上导航时,它可以减少 INP。
- 类型:
boolean
- 默认值:
true
noVueServer
在 nitro 中禁用 vue 服务器渲染器端点。
- 类型:
boolean
- 默认值:
false
normalizeComponentNames
确保自动生成的 Vue 组件名称与用于自动导入组件的完整组件名称匹配。
- 类型:
boolean
- 默认值:
false
parseErrorData
在渲染服务器错误页面时是否解析 error.data
。
- 类型:
boolean
- 默认值:
false
payloadExtraction
启用后(默认情况下),将提取预渲染页面的有效负载。
- 类型:
boolean
- 默认值:
true
pendingWhenIdle
对于 useAsyncData
和 useFetch
,当数据尚未开始获取时,pending
是否应为 true
。
- 类型:
boolean
- 默认值:
true
polyfillVueUseHead
是否为依赖旧 @vueuse/head
API 的模块、插件或用户代码添加兼容性层。
禁用此功能可减少约 0.5kb 的客户端包大小。
- 类型:
boolean
- 默认值:
false
purgeCachedData
在路由导航时是否清理 Nuxt 静态和异步数据缓存。
Nuxt 将自动清理 useAsyncData
和 nuxtApp.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
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
sharedPrerenderData
在预渲染的页面之间自动共享有效负载 数据。在预渲染使用 useAsyncData
或 useFetch
并在不同页面中获取相同数据的站点时,这可以显著提高性能。
启用此功能时,特别重要的是确保数据的唯一键始终可以解析为相同的数据。例如,如果您使用 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"
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
对象(包含 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
在使用 node 服务器时写入早期提示。
- 类型:
boolean
- 默认值:
false
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
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 或其他模块注册的自动导入,例如来自 vue
或 nuxt
的导入,仍将启用。
- 类型:
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 的 resolveLoading
、nodeExternals
和 postcss
)。
配置路径相对于 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
结尾,则仅在适当的上下文中自动加载。
它也可以是一个带有 src
和 mode
键的对象。
- 类型:
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
选项外的其他自定义选项(见下文)。
router.options.ts
文件。参见: Vue Router 文档
hashMode
您可以在 SPA 模式下启用哈希历史记录。在此模式下,路由器在内部传递的实际 URL 前使用哈希字符 (#)。启用后,URL 永远不会发送到服务器,不支持 SSR。
- 类型:
boolean
- 默认值:
false
默认值: false
scrollBehaviorType
为哈希链接自定义滚动行为。
- 类型:
string
- 默认值:
"auto"
默认值: 'auto'
runtimeConfig
运行时配置允许将动态配置和环境变量传递给 Nuxt 应用上下文。
此对象的价值只能通过 useRuntimeConfig
在服务器上访问。
它主要应包含不暴露给前端的 私有 配置,例如 API 密钥令牌的引用。
public
和 app
下的任何内容也将暴露给前端。
值会在运行时自动被匹配的环境变量替换,例如,设置环境变量 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/api
、server/middleware
和 server/routes
中的文件将由 Nuxt 自动注册。示例:
serverHandlers: [
{ route: '/path/foo/**:name', handler: '~/server/foohandler.ts' }
]
sourcemap
配置是否以及如何为服务器和/或客户端包生成源映射。
如果设置为单个布尔值,该值将同时应用于服务器和客户端。此外,server
和 client
还支持 '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 图像。 一些好的旋转器来源包括 SpinKit 或 SVG 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
限制为仅构建时类型检查。需要安装 typescript
和 vue-tsc
作为开发依赖项。
- 类型:
boolean
- 默认值:
false
unhead
允许我们配置 unhead
Nuxt 模块的对象。
legacy
为 unhead
模块启用旧版兼容模式。应用以下更改:
- 禁用 Capo.js 排序
- 添加
DeprecationsPlugin
:支持hid
、vmid
、children
、body
- 添加
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 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,
// 或
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>"