实验特色功能 Experimental Features

Nuxt 实验性功能需要手动启用。

Nuxt实验功能可以在Nuxt配置文件中启用。在内部，Nuxt 使用@nuxt/schema来定义这些实验性功能。您可以参考API文档或源代码了解更多信息。

请注意，这些功能是实验性的，将来可能会被删除或修改。

异步入口

启用 Vue 包的异步入口点生成，帮助模块联合支持。

nuxt.config.ts

export defineNuxtConfig({ experimental: { asyncEntry: true } })

响应式变换

启用 Vue 的反应性转换。请注意，此功能在 Vue 3.3 中已被标记为已弃用，并计划在 Vue 3.4 中从核心中删除。

nuxt.config.ts

export defineNuxtConfig({ experimental: { reactivityTransform: true } })

externalVue

构建时外部化 vue、@vue/* 和 vue-router。 默认启用。

nuxt.config.ts

export defineNuxtConfig({ experimental: { externalVue: true } })

此功能可能会在 Nuxt 3.6 中删除。

treeshakeClientOnly

树从服务器包中摇动仅客户端组件的内容。 默认启用。

nuxt.config.ts

export defineNuxtConfig({ experimental: { treeshakeClientOnly: true } })

emitRouteChunkError

当加载 vite/webpack 块时出错时，发出 app:chunkError 钩子。默认行为是在块加载失败时对新路由执行硬重新加载。您可以通过将其设置为“false”来禁用自动处理，或者通过将其设置为“manual”来手动处理块错误。

nuxt.config.ts

export defineNuxtConfig({ experimental: { emitRouteChunkError: 'automatic' } }) // or 'manual' or false

restoreState

在块错误或手动“reloadNuxtApp()”调用后重新加载页面时，允许从“sessionStorage”恢复 Nuxt 应用程序状态。

为了避免水合错误，它只会在 Vue 应用程序安装后应用，这意味着初始加载时可能会出现闪烁。

在启用此功能之前请仔细考虑，因为它可能会导致意外行为，并考虑向 useState 提供显式键，因为自动生成的键可能在构建之间不匹配。

nuxt.config.ts

export defineNuxtConfig({ experimental: { restoreState: true } })

inlineSSRStyles

渲染 HTML 时内联样式。目前仅在使用 Vite 时可用。您还可以传递一个函数，该函数接收 Vue 组件的路径并返回一个布尔值，指示是否内联该组件的样式。

nuxt.config.ts

export defineNuxtConfig({ experimental: { inlineSSRStyles: true } }) // or a function to determine inlining

noScripts

禁用 Nuxt 脚本和 JS 资源提示的渲染。还可以在“routeRules”中进行精细配置。

nuxt.config.ts

export defineNuxtConfig({ experimental: { noScripts: true } })

renderJsonPayloads

允许呈现 JSON 有效负载并支持恢复复杂类型。 默认启用。

nuxt.config.ts

export defineNuxtConfig({ experimental: { renderJsonPayloads: true } })

noVueServer

禁用 Nitro 中的 Vue 服务器渲染器端点。

nuxt.config.ts

export defineNuxtConfig({ experimental: { noVueServer: true } })

payloadExtraction

允许提取使用nuxtgenerate生成的页面的有效负载。

nuxt.config.ts

export defineNuxtConfig({ experimental: { payloadExtraction: true } })

clientFallback

如果 SSR 中出现错误，启用实验性“”组件以在客户端上呈现内容。

nuxt.config.ts

export defineNuxtConfig({ experimental: { clientFallback: true } })

crossOriginPrefetch

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

nuxt.config.ts

export defineNuxtConfig({ experimental: { crossOriginPrefetch: true } })

viewTransition

启用视图转换 API 与客户端路由器的集成。

nuxt.config.ts

export defineNuxtConfig({ experimental: { viewTransition: true } })

writeEarlyHints

使用节点服务器时启用早期提示的写入。

nuxt.config.ts

export defineNuxtConfig({ experimental: { writeEarlyHints: true } })

componentIslands

通过 <NuxtIsland> 和 .island.vue 文件启用实验性组件岛支持。

nuxt.config.ts

export defineNuxtConfig({ experimental: { componentIslands: true } })

您可以按照 GitHub 上的服务器组件路线图进行操作。

configSchema

启用配置架构支持。 默认启用。

nuxt.config.ts

export defineNuxtConfig({ experimental: { configSchema: true } })

polyfillVueUseHead

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

nuxt.config.ts

export defineNuxtConfig({ experimental: { polyfillVueUseHead: false } })

respectNoSSRHeader

允许通过设置“x-nuxt-no-ssr”标头来禁用 Nuxt SSR 响应。

nuxt.config.ts

export defineNuxtConfig({ experimental: { respectNoSSRHeader: false } })

localLayerAliases

解析位于层内相对于层源和根目录的“~”、“~~”、“@”和“@@”别名。 默认启用。

nuxt.config.ts

export defineNuxtConfig({ experimental: { localLayerAliases: true } })

typedPages

使用 unplugin-vue-router 启用新的实验性类型路由器。

nuxt.config.ts

export defineNuxtConfig({ experimental: { typedPages: false } })

开箱即用，这将启用navigateTo、<NuxtLink>、router.push()等的类型化使用。您甚至可以使用const route = useRoute('route-name')在页面中获取键入的参数。

watcher

设置一个替代观察者，用作 Nuxt 的观察服务。 Nuxt 默认使用 chokidar-capsular，它将忽略被排除在监视之外的顶级目录(如 node_modules 和 .git)。您可以将其设置为parcel以使用@parcel/watcher，这可能会提高大型项目或 Windows 平台上的性能。您还可以将其设置为“chokidar”以监视源目录中的所有文件。

nuxt.config.ts

export defineNuxtConfig({
    experimental: {
        watcher: 'chokidar-granular' // 'chokidar' 或 'parcel' 也是选项
    }
})