- 配置参考 Configuration
- 入门指南
- 介绍 Introduction
- 安装 Installation
- 配置 Configuration
- 视图 Views
- 资产 Assets
- 路由 Routing
- SEO and Meta
- 过渡 Transitions
- 数据获取 Data Fetching
- 状态管理 State Management
- 错误处理 Error handling
- 层结构 Layers
- 部署 Deployment
- 测试 Testing
- 升级指南 Upgrade Guide
- 核心概念
- 自动导入 Auto imports
- Vue.Js Vue.js Development
- 渲染模式 Rendering Modes
- 服务端引擎 Server Engine
- 模块化 Modules
- ES模块 ES Modules
- TypeScript TypeScript
- 目录结构
- 可组合项
- 组件
- 工具库
- fetch
- abortNavigation
- addRouteMiddleware
- clearError
- clearNuxtData
- createError
- defineNuxtComponent
- defineNuxtRouteMiddleware
- definePageMeta
- navigateTo
- onBeforeRouteLeave
- onBeforeRouteUpdate
- onNuxtReady
- prefetchComponents
- preloadComponents
- preloadRouteComponents
- refreshNuxtData
- reloadNuxtApp
- setPageLayout
- setResponseStatus
- showError
- updateAppConfig
- CLI 命令
- 进阶
- 深入探究
- 迁移指南
实验特色功能 Experimental
Nuxt实验功能可以在Nuxt配置文件中启用。 在内部,Nuxt 使用@nuxt/schema
来定义这些实验性功能。 您可以参考API文档或源代码了解更多信息。
请注意,这些功能是实验性的,将来可能会被删除或修改。
异步入口
启用 Vue 包的异步入口点生成,帮助模块联合支持。
nuxt.config.tsexport defineNuxtConfig({ experimental: { asyncEntry: true } })
响应式变换
启用 Vue 的反应性转换。 请注意,此功能在 Vue 3.3 中已被标记为已弃用,并计划在 Vue 3.4 中从核心中删除。
nuxt.config.tsexport defineNuxtConfig({ experimental: { reactivityTransform: true } })
externalVue
构建时外部化 vue
、@vue/*
和 vue-router
。 默认启用。
export defineNuxtConfig({ experimental: { externalVue: true } })
此功能可能会在 Nuxt 3.6 中删除。
treeshakeClientOnly
树从服务器包中摇动仅客户端组件的内容。 默认启用。
nuxt.config.tsexport defineNuxtConfig({ experimental: { treeshakeClientOnly: true } })
emitRouteChunkError
当加载 vite/webpack 块时出错时,发出 app:chunkError
钩子。 默认行为是在块加载失败时对新路由执行硬重新加载。 您可以通过将其设置为“false”来禁用自动处理,或者通过将其设置为“manual”来手动处理块错误。
export defineNuxtConfig({ experimental: { emitRouteChunkError: 'automatic' } }) // or 'manual' or false
restoreState
在块错误或手动“reloadNuxtApp()”调用后重新加载页面时,允许从“sessionStorage”恢复 Nuxt 应用程序状态。
为了避免水合错误,它只会在 Vue 应用程序安装后应用,这意味着初始加载时可能会出现闪烁。
在启用此功能之前请仔细考虑,因为它可能会导致意外行为,并考虑向 useState
提供显式键,因为自动生成的键可能在构建之间不匹配。
export defineNuxtConfig({ experimental: { restoreState: true } })
inlineSSRStyles
渲染 HTML 时内联样式。 目前仅在使用 Vite 时可用。 您还可以传递一个函数,该函数接收 Vue 组件的路径并返回一个布尔值,指示是否内联该组件的样式。
nuxt.config.tsexport defineNuxtConfig({ experimental: { inlineSSRStyles: true } }) // or a function to determine inlining
noScripts
禁用 Nuxt 脚本和 JS 资源提示的渲染。 还可以在“routeRules”中进行精细配置。
nuxt.config.tsexport defineNuxtConfig({ experimental: { noScripts: true } })
renderJsonPayloads
允许呈现 JSON 有效负载并支持恢复复杂类型。 默认启用。
nuxt.config.tsexport defineNuxtConfig({ experimental: { renderJsonPayloads: true } })
noVueServer
禁用 Nitro 中的 Vue 服务器渲染器端点。
nuxt.config.tsexport defineNuxtConfig({ experimental: { noVueServer: true } })
payloadExtraction
允许提取使用nuxtgenerate
生成的页面的有效负载。
export defineNuxtConfig({ experimental: { payloadExtraction: true } })
clientFallback
如果 SSR 中出现错误,启用实验性“
export defineNuxtConfig({ experimental: { clientFallback: true } })
crossOriginPrefetch
使用推测规则 API 启用跨源预取。
nuxt.config.tsexport defineNuxtConfig({ experimental: { crossOriginPrefetch: true } })
viewTransition
启用视图转换 API 与客户端路由器的集成。
nuxt.config.tsexport defineNuxtConfig({ experimental: { viewTransition: true } })
相关阅读:getting-started > transitions#视图过渡 API(实验性)writeEarlyHints
使用节点服务器时启用早期提示的写入。
nuxt.config.tsexport defineNuxtConfig({ experimental: { writeEarlyHints: true } })
componentIslands
通过 <NuxtIsland>
和 .island.vue
文件启用实验性组件岛支持。
export defineNuxtConfig({ experimental: { componentIslands: true } })
相关阅读:dirs > components#server-components您可以按照 GitHub 上的服务器组件路线图进行操作。
configSchema
启用配置架构支持。 默认启用。
nuxt.config.tsexport defineNuxtConfig({ experimental: { configSchema: true } })
polyfillVueUseHead
为依赖于旧的“@vueuse/head” API 的模块、插件或用户代码添加兼容层。
nuxt.config.tsexport defineNuxtConfig({ experimental: { polyfillVueUseHead: false } })
respectNoSSRHeader
允许通过设置“x-nuxt-no-ssr”标头来禁用 Nuxt SSR 响应。
nuxt.config.tsexport defineNuxtConfig({ experimental: { respectNoSSRHeader: false } })
localLayerAliases
解析位于层内相对于层源和根目录的“~”、“~~”、“@”和“@@”别名。 默认启用。
nuxt.config.tsexport defineNuxtConfig({ experimental: { localLayerAliases: true } })
typedPages
使用 unplugin-vue-router 启用新的实验性类型路由器。
nuxt.config.tsexport 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”以监视源目录中的所有文件。
export defineNuxtConfig({
experimental: {
watcher: 'chokidar-granular' // 'chokidar' 或 'parcel' 也是选项
}
})
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论