实验性功能
Nuxt 的实验性功能可以在 Nuxt 配置文件中启用。
在内部，Nuxt 使用 @nuxt/schema 定义这些实验性功能。您可以参考 API 文档 或 源代码 了解更多信息。
asyncContext
启用原生异步上下文以便在 Nuxt 和 Nitro 中的嵌套组合式中访问。这样可以在异步组合式中使用组合式并减少出现 Nuxt 实例不可用 错误的几率。
export defineNuxtConfig({
experimental: {
asyncContext: true
}
})
asyncEntry
启用 Vue 捆绑包的异步入口点生成，以支持模块联邦。
export defineNuxtConfig({
experimental: {
asyncEntry: true
}
})
reactivityTransform
启用 Vue 的响应式转换。请注意，这个功能在 Vue 3.3 中被标记为已弃用，并计划在 Vue 3.4 中从核心中删除。
export defineNuxtConfig({
experimental: {
reactivityTransform: true
}
})
externalVue
在构建时将 vue、@vue/* 和 vue-router 外部化。
默认已启用。
export defineNuxtConfig({
experimental: {
externalVue: true
}
})
treeshakeClientOnly
从服务器捆绑包中修剪仅客户端使用的组件。
默认已启用。
export defineNuxtConfig({
experimental: {
treeshakeClientOnly: true
}
})
emitRouteChunkError
在加载 vite/webpack 块时发生错误时，触发 app:chunkError 钩子。默认行为是在块加载失败时对新路由执行硬刷新。
您可以通过将其设置为 false 来禁用自动处理，或者通过将其设置为 manual 来手动处理块错误。
export defineNuxtConfig({
experimental: {
emitRouteChunkError: 'automatic' // 或 'manual' 或 false
}
})
restoreState
在重新加载页面后，允许从 sessionStorage 恢复 Nuxt 应用程序状态，以解决块错误或手动 reloadNuxtApp() 调用。
为避免 hydration 错误，它将仅在 Vue 应用程序挂载之后应用，这意味着初始加载可能会有闪烁。
useState 提供显式键，因为自动生成的键可能在构建之间不匹配。export defineNuxtConfig({
experimental: {
restoreState: true
}
})
inlineRouteRules
使用 defineRouteRules 在页面级别定义路由规则。
export defineNuxtConfig({
experimental: {
inlineRouteRules: true
}
})
将基于页面的 path 创建匹配的路由规则。
inlineSSRStyles
在渲染 HTML 时内联样式。目前仅在使用 Vite 时可用。 您还可以传递一个接收 Vue 组件路径并返回一个布尔值以指示是否内联该组件样式的函数。
export defineNuxtConfig({
experimental: {
inlineSSRStyles: true // 或用于确定内联的函数
}
})
noScripts
禁用 Nuxt 脚本和 JS 资源提示的渲染。在 routeRules 中也可以进行细粒度配置。
export defineNuxtConfig({
experimental: {
noScripts: true
}
})
renderJsonPayloads
允许渲染带有复杂类型的 JSON 载荷。
默认已启用。
export defineNuxtConfig({
experimental: {
renderJsonPayloads: true
}
})
noVueServer
在 Nitro 中禁用 Vue 服务器渲染器端点。
export defineNuxtConfig({
experimental: {
noVueServer: true
}
})
payloadExtraction
启用提取使用 nuxt generate 生成的页面的有效负载。
export defineNuxtConfig({
experimental: {
payloadExtraction: true
}
})
clientFallback
在 SSR 中发生错误时，在客户端使用实验性的 <NuxtClientFallback> 组件渲染内容。
export defineNuxtConfig({
experimental: {
clientFallback: true
}
})
crossOriginPrefetch
使用 Speculation Rules API 启用跨域预取。
export defineNuxtConfig({
experimental: {
crossOriginPrefetch: true
}
})
viewTransition
启用客户端路由器与视图转换 API 的集成。
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
writeEarlyHints
在使用 Node 服务器时启用写入提前提示。
export default defineNuxtConfig({
experimental: {
writeEarlyHints: true
}
})
componentIslands
启用实验性的组件岛支持，使用 <NuxtIsland> 和 .island.vue 文件。
export default defineNuxtConfig({
experimental: {
componentIslands: true // false 或 '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: false
}
})
开箱即用，这将启用对 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' 或 'parcel' 也是可选项
}
})