实验性功能
启用 Nuxt 实验性功能以解锁新的可能性。
Nuxt 的实验性功能可以在 Nuxt 配置文件中启用。
在内部，Nuxt 使用 @nuxt/schema 来定义这些实验性功能。您可以参考 API 文档 或 源代码 获取更多信息。
asyncContext
启用原生异步上下文，以便在 Nuxt 和 Nitro 中的嵌套组合式函数中访问。这为在异步组合式函数中使用组合式函数打开了可能性，并减少了出现 Nuxt 实例不可用 错误的可能性。
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
asyncEntry
启用为 Vue 包生成异步入口点，有助于模块联合支持。
export default defineNuxtConfig({
experimental: {
asyncEntry: true
}
})
externalVue
在构建时将 vue、@vue/* 和 vue-router 外部化。
默认启用。
export default defineNuxtConfig({
experimental: {
externalVue: true
}
})
treeshakeClientOnly
从服务器包中树摇客户端专用组件的内容。
默认启用。
export default defineNuxtConfig({
experimental: {
treeshakeClientOnly: true
}
})
emitRouteChunkError
当加载 vite/webpack 块时出现错误时，会发出 app:chunkError 钩子。默认行为是在块加载失败时对新路由执行硬刷新。
您可以通过将其设置为 false 来禁用自动处理，或者通过将其设置为 manual 来手动处理块错误。
export default defineNuxtConfig({
experimental: {
emitRouteChunkError: 'automatic' // or 'manual' or false
}
})
restoreState
允许在块错误或手动 reloadNuxtApp() 调用后重新加载页面时，从 sessionStorage 中恢复 Nuxt 应用程序状态。
为了避免水合错误，它将在 Vue 应用挂载后才应用，这意味着初始加载时可能会出现闪烁。
useState 提供显式键，因为自动生成的键可能在不同构建之间不匹配。export default defineNuxtConfig({
experimental: {
restoreState: true
}
})
inlineRouteRules
使用 defineRouteRules 在页面级别定义路由规则。
export default defineNuxtConfig({
experimental: {
inlineRouteRules: true
}
})
将根据页面的 path 创建匹配的路由规则。
renderJsonPayloads
允许渲染 JSON 负载，并支持恢复复杂类型。
默认启用。
export default defineNuxtConfig({
experimental: {
renderJsonPayloads: true
}
})
noVueServer
在 Nitro 中禁用 Vue 服务器渲染端点。
export default defineNuxtConfig({
experimental: {
noVueServer: true
}
})
payloadExtraction
启用提取使用 nuxt generate 生成的页面的负载。
export default defineNuxtConfig({
experimental: {
payloadExtraction: true
}
})
clientFallback
启用实验性的 <NuxtClientFallback> 组件，以便在 SSR 中出现错误时在客户端渲染内容。
export default defineNuxtConfig({
experimental: {
clientFallback: true
}
})
crossOriginPrefetch
使用 Speculation Rules API 启用跨源预取。
export default defineNuxtConfig({
experimental: {
crossOriginPrefetch: true
}
})
viewTransition
启用 View Transition API 与客户端路由器的集成。
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
writeEarlyHints
在使用节点服务器时启用早期提示的写入。
export default defineNuxtConfig({
experimental: {
writeEarlyHints: true
}
})
componentIslands
启用使用 <NuxtIsland> 和 .island.vue 文件的实验性组件岛支持。
export default defineNuxtConfig({
experimental: {
componentIslands: true // false or 'local+remote'
}
})
configSchema
启用配置模式支持。
默认启用。
export default defineNuxtConfig({
experimental: {
configSchema: true
}
})
polyfillVueUseHead
为依赖于旧版 @vueuse/head API 的模块、插件或用户代码添加兼容层。
export default defineNuxtConfig({
experimental: {
polyfillVueUseHead: false
}
})
respectNoSSRHeader
允许通过设置 x-nuxt-no-ssr 头部来禁用 Nuxt SSR 响应。
export default defineNuxtConfig({
experimental: {
respectNoSSRHeader: false
}
})
localLayerAliases
解析位于层内的 ~、~~、@ 和 @@ 别名，以尊重其层源和根目录。
默认启用。
export default defineNuxtConfig({
experimental: {
localLayerAliases: true
}
})
typedPages
使用 unplugin-vue-router 启用新的实验性类型化路由器。
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
开箱即用，这将启用 navigateTo、<NuxtLink>、router.push() 等等的类型化使用。
您甚至可以使用 const route = useRoute('route-name') 在页面中获取类型参数。
watcher
设置一个备用观察者，它将用作 Nuxt 的观察服务。
Nuxt 默认使用 chokidar-granular，它将忽略从观察中排除的顶级目录（如 node_modules 和 .git）。
您可以将其设置为 parcel 以使用 @parcel/watcher，这可能会在大型项目或 Windows 平台上提高性能。
您也可以将其设置为 chokidar 以观察源目录中的所有文件。
export default defineNuxtConfig({
experimental: {
watcher: 'chokidar-granular' // 'chokidar' or 'parcel' are also options
}
})
sharedPrerenderData
启用此功能会自动在预渲染的页面之间共享有效载荷 data。当预渲染使用 useAsyncData 或 useFetch 并在不同页面中获取相同数据的站点时，这可能会导致性能显着提高。
export default defineNuxtConfig({
experimental: {
sharedPrerenderData: true
}
})
启用此功能时，最重要的是确保数据的任何唯一键始终可以解析为相同的数据。例如，如果您使用 useAsyncData 获取与特定页面相关的数据，则应提供一个与该数据唯一匹配的键。（useFetch 应该会自动为您执行此操作。）
// 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}`)
})
clientNodeCompat
使用此功能，Nuxt 将使用 unenv 在客户端构建中自动填充 Node.js 导入。
Buffer 等全局变量在浏览器中工作，您需要手动注入它们。import { Buffer } from 'node:buffer'
globalThis.Buffer = globalThis.Buffer || Buffer
scanPageMeta
此选项允许在构建时将 definePageMeta 中定义的一些路由元数据公开给模块（特别是 alias、name、path、redirect）。
这仅适用于静态或字符串/数组，而不是变量或条件赋值。有关更多信息和上下文，请参见 original issue。
cookieStore
启用 CookieStore 支持以监听 cookie 更新（如果浏览器支持）并刷新 useCookie ref 值。
export default defineNuxtConfig({
experimental: {
cookieStore: true
}
})