返回介绍

实验特色功能 Experimental

发布于 2024-04-18 00:42:18 字数 5700 浏览 0 评论 0 收藏 0

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 } })
相关阅读:getting-started > transitions#视图过渡 API(实验性)

writeEarlyHints

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

nuxt.config.ts
export defineNuxtConfig({ experimental: { writeEarlyHints: true } })

componentIslands

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

nuxt.config.ts
export defineNuxtConfig({ experimental: { componentIslands: true } })
相关阅读:dirs > components#server-components

您可以按照 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' 也是选项
    } 
}) 

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文