[{"data":1,"prerenderedAt":2637},["ShallowReactive",2],{"docs-all-flat":3,"docs-\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering":1018},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316,320,324,328,332,336,340,344,348,352,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627,631,635,639,643,647,651,655,659,663,667,671,675,679,683,687,691,695,699,703,707,711,715,719,723,727,731,735,739,743,747,751,755,759,763,767,770,774,778,782,786,790,794,798,802,806,809,813,817,821,825,829,833,837,841,845,849,852,855,859,863,867,871,874,877,881,884,888,892,895,898,901,904,907,911,915,918,922,926,930,934,938,942,946,950,954,958,962,966,970,974,978,982,986,990,994,998,1002,1006,1010,1014],{"path":5,"title":6,"description":7},"\u002Fdocs\u002Fgetting-started\u002Fintroduction","介绍","Nuxt 的目标是提供直观且高性能的 Web 开发体验，并始终将优秀的开发者体验（Developer Experience）放在心上。",{"path":9,"title":10,"description":11},"\u002Fdocs\u002Fgetting-started\u002Finstallation","安装","通过在线 starter 快速上手 Nuxt，或在本地使用终端从零开始。",{"path":13,"title":14,"description":15},"\u002Fdocs\u002Fgetting-started\u002Fconfiguration","配置","Nuxt 提供了合理的默认配置，让你高效开发。",{"path":17,"title":18,"description":19},"\u002Fdocs\u002Fgetting-started\u002Fviews","视图","Nuxt 提供了多个组件层来实现应用的用户界面。",{"path":21,"title":22,"description":23},"\u002Fdocs\u002Fgetting-started\u002Fassets","资源","Nuxt 为你的资源提供了两种处理方式。",{"path":25,"title":26,"description":27},"\u002Fdocs\u002Fgetting-started\u002Fstyling","样式","了解如何为你的 Nuxt 应用添加样式。",{"path":29,"title":30,"description":31},"\u002Fdocs\u002Fgetting-started\u002Frouting","路由","Nuxt 的文件系统路由会为 pages\u002F 目录中的每个文件创建一条路由。",{"path":33,"title":34,"description":35},"\u002Fdocs\u002Fgetting-started\u002Fseo-meta","SEO 与 Meta","借助强大的 head 配置、composables 和组件，改善你的 Nuxt 应用的 SEO。",{"path":37,"title":38,"description":39},"\u002Fdocs\u002Fgetting-started\u002Ftransitions","过渡","使用 Vue 或浏览器原生的 View Transitions，在页面和布局之间应用过渡效果。",{"path":41,"title":42,"description":43},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching","数据获取","Nuxt 提供了用于处理应用内数据获取的 composables。",{"path":45,"title":46,"description":47},"\u002Fdocs\u002Fgetting-started\u002Fstate-management","状态管理","Nuxt 提供了强大的状态管理库和 useState composable，用于创建响应式且对 SSR 友好的共享状态。",{"path":49,"title":50,"description":51},"\u002Fdocs\u002Fgetting-started\u002Ferror-handling","错误处理","了解如何在 Nuxt 中捕获和处理错误。",{"path":53,"title":54,"description":55},"\u002Fdocs\u002Fgetting-started\u002Fserver","Server","利用 Nuxt 的服务端框架构建全栈应用。你可以从数据库或其他服务端获取数据、创建 API，甚至生成像站点地图或 RSS 这样的静态服务端内容——全部来自同一个代码库。",{"path":57,"title":58,"description":59},"\u002Fdocs\u002Fgetting-started\u002Flayers","Layers","Nuxt 提供了一套强大的系统，允许你扩展默认文件、配置以及更多内容。",{"path":61,"title":62,"description":63},"\u002Fdocs\u002Fgetting-started\u002Fprerendering","Prerendering","Nuxt 允许在构建时静态渲染某些页面，以改善特定的性能或 SEO 指标。",{"path":65,"title":66,"description":67},"\u002Fdocs\u002Fgetting-started\u002Fdeployment","Deployment","了解如何将你的 Nuxt 应用部署到任何托管提供商。",{"path":69,"title":70,"description":71},"\u002Fdocs\u002Fgetting-started\u002Ftesting","Testing","如何测试你的 Nuxt 应用。",{"path":73,"title":74,"description":75},"\u002Fdocs\u002Fgetting-started\u002Fupgrade","Upgrade Guide","了解如何升级到最新的 Nuxt 版本。",{"path":77,"title":78,"description":79},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt",".nuxt","Nuxt 在开发阶段使用 .nuxt\u002F 目录来生成你的 Vue 应用。",{"path":81,"title":82,"description":83},"\u002Fdocs\u002Fdirectory-structure\u002Foutput",".output","Nuxt 在为生产环境构建应用时创建 .output\u002F 目录。",{"path":85,"title":86,"description":87},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fassets","assets","assets\u002F 目录用于添加所有将由构建工具处理的网站资源。",{"path":89,"title":90,"description":91},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents","components","components\u002F 目录用于存放你所有的 Vue 组件。",{"path":93,"title":94,"description":95},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomposables","composables","使用 composables\u002F 目录将你的 Vue 组合式函数自动导入到应用中。",{"path":97,"title":98,"description":99},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Flayouts","layouts","Nuxt 提供了一个布局框架，用于将通用的 UI 模式提取为可复用的布局。",{"path":101,"title":102,"description":103},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fmiddleware","middleware","Nuxt 提供中间件，用于在导航到特定路由前运行代码。",{"path":105,"title":106,"description":107},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fpages","pages","Nuxt 提供基于文件的路由，用于在 Web 应用中创建路由。",{"path":109,"title":110,"description":111},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fplugins","plugins","Nuxt 拥有一个插件系统，用于在创建 Vue 应用时使用 Vue 插件等。",{"path":113,"title":114,"description":115},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Futils","utils","使用 utils\u002F 目录在你的应用中自动导入工具函数。",{"path":117,"title":118,"description":119},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp","app.vue","app.vue 文件是你 Nuxt 应用的主组件。",{"path":121,"title":122,"description":123},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp-config","app.config.ts","使用 App Config 文件在应用内部暴露响应式配置。",{"path":125,"title":126,"description":127},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Ferror","error.vue","error.vue 文件是你 Nuxt 应用中的错误页面。",{"path":129,"title":130,"description":131},"\u002Fdocs\u002Fdirectory-structure\u002Fcontent","content","使用 content\u002F 目录为你的应用创建一个基于文件的 CMS。",{"path":133,"title":134,"description":135},"\u002Fdocs\u002Fdirectory-structure\u002Flayers","layers","使用 layers\u002F 目录在你的应用中组织和自动注册本地 layers。",{"path":137,"title":138,"description":139},"\u002Fdocs\u002Fdirectory-structure\u002Fmodules","modules","使用 modules\u002F 目录在你的应用中自动注册本地模块。",{"path":141,"title":142,"description":143},"\u002Fdocs\u002Fdirectory-structure\u002Fnode_modules","node_modules","包管理器将项目的依赖存储在 node_modules\u002F 目录中。",{"path":145,"title":146,"description":147},"\u002Fdocs\u002Fdirectory-structure\u002Fpublic","public","public\u002F 目录用于提供网站的静态资源。",{"path":149,"title":150,"description":151},"\u002Fdocs\u002Fdirectory-structure\u002Fserver","server","server\u002F 目录用于为你的应用注册 API 和服务端处理器。",{"path":153,"title":154,"description":155},"\u002Fdocs\u002Fdirectory-structure\u002Fshared","shared","使用 shared\u002F 目录在 Vue 应用和 Nitro 服务端之间共享功能。",{"path":157,"title":158,"description":159},"\u002Fdocs\u002Fdirectory-structure\u002Fenv",".env",".env 文件用于指定构建\u002F开发时的环境变量。",{"path":161,"title":162,"description":163},"\u002Fdocs\u002Fdirectory-structure\u002Fgitignore",".gitignore",".gitignore 文件用于指定 git 应当忽略的、有意不跟踪的文件。",{"path":165,"title":166,"description":167},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtignore",".nuxtignore",".nuxtignore 文件用于让 Nuxt 在构建阶段忽略项目根目录中的文件。",{"path":169,"title":170,"description":171},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtrc",".nuxtrc",".nuxtrc 文件允许你用扁平语法定义 Nuxt 配置。",{"path":173,"title":174,"description":175},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt-config","nuxt.config.ts","只需要一个 nuxt.config 文件，即可轻松配置 Nuxt。",{"path":177,"title":178,"description":179},"\u002Fdocs\u002Fdirectory-structure\u002Fpackage","package.json","package.json 文件包含你应用的所有依赖和脚本。",{"path":181,"title":182,"description":183},"\u002Fdocs\u002Fdirectory-structure\u002Ftsconfig","tsconfig.json","了解 Nuxt 如何在项目的不同部分管理 TypeScript 配置。",{"path":185,"title":186,"description":187},"\u002Fdocs\u002Fdirectory-structure","Nuxt 目录结构","了解 Nuxt 应用的目录结构以及如何使用它。",{"path":189,"title":190,"description":191},"\u002Fdocs\u002Fguide","Nuxt 指南","通过深入的指南了解 Nuxt 的工作原理。",{"path":193,"title":194,"description":195},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering","渲染模式","了解 Nuxt 中可用的不同渲染模式。",{"path":197,"title":198,"description":199},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fvuejs-development","Vue.js 开发","Nuxt 使用 Vue.js，并添加了组件自动导入、基于文件的路由以及支持 SSR 的组合式函数等特性。",{"path":201,"title":202,"description":203},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fnuxt-lifecycle","Nuxt 生命周期","理解 Nuxt 应用的生命周期，可以帮助你更深入地了解框架是如何运作的，尤其是在服务端渲染和客户端渲染两方面。",{"path":205,"title":206,"description":207},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fauto-imports","自动导入","Nuxt 会自动导入组件、组合式函数、辅助函数和 Vue API。",{"path":209,"title":210,"description":211},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fserver-engine","服务端引擎","Nuxt 由一个全新的服务端引擎驱动：Nitro。",{"path":213,"title":214,"description":215},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fmodules","模块","Nuxt 提供了一个模块系统来扩展框架核心并简化集成。",{"path":217,"title":218,"description":219},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fesm","ES 模块","Nuxt 使用原生的 ES 模块。",{"path":221,"title":222,"description":223},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Ftypescript","TypeScript","Nuxt 完全类型化，并提供了有用的快捷方式，确保你在编码时能获取准确的类型信息。",{"path":225,"title":226,"description":227},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fcode-style","代码风格","Nuxt 开箱即用地支持 ESLint",{"path":229,"title":230,"description":231},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fdevcontainers","Dev Containers","在开发容器中设置或打开 Nuxt 项目，以获得一致开发环境。",{"path":233,"title":234,"description":235},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fhydration","Nuxt and Hydration","为什么修复水合问题很重要",{"path":237,"title":238,"description":239},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fperformance","Nuxt performance","提升 Nuxt 应用性能的最佳实践。",{"path":241,"title":242,"description":243},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fplugins","Nuxt Plugins","使用 Nuxt 插件时的最佳实践。",{"path":245,"title":246,"description":247},"\u002Fdocs\u002Fguide\u002Fai\u002Fmcp","Nuxt MCP Server","借助 Model Context Protocol 支持，在你的 AI 助手中使用 Nuxt 文档。",{"path":249,"title":250,"description":251},"\u002Fdocs\u002Fguide\u002Fai\u002Fllms-txt","Nuxt LLMs.txt","如何让 Cursor、Windsurf、GitHub Copilot、ChatGPT 和 Claude 等 AI 工具理解 Nuxt 的概念、API 和最佳实践。",{"path":253,"title":254,"description":255},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fgetting-started","创建你的第一个模块","学习如何使用官方启动模板创建你的第一个 Nuxt 模块。",{"path":257,"title":258,"description":259},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-anatomy","理解模块结构","学习 Nuxt 模块是如何构成的，以及如何定义它们。",{"path":261,"title":262,"description":263},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-basics","添加插件、组件等","学习如何从你的模块注入插件、组件、组合式函数和服务端路由。",{"path":265,"title":266,"description":267},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-dependencies","模块依赖","声明对其它模块的依赖，并带有版本约束和配置合并。",{"path":269,"title":270,"description":271},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-advanced","使用钩子与扩展类型","在你的模块中掌握生命周期钩子、虚拟文件和 TypeScript 声明。",{"path":273,"title":274,"description":275},"\u002Fdocs\u002Fguide\u002Fmodules\u002Ftesting","测试你的模块","学习如何对你的 Nuxt 模块进行单元、集成和 E2E 测试。",{"path":277,"title":278,"description":279},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fbest-practices","遵循最佳实践","使用这些指南构建高性能且可维护的 Nuxt 模块。",{"path":281,"title":282,"description":283},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fecosystem","发布与分享你的模块","加入 Nuxt 模块生态，并将你的模块发布到 npm。",{"path":285,"title":286,"description":287},"\u002Fdocs\u002Fguide\u002Fmodules","Module Author Guide","学习如何创建 Nuxt 模块，以集成、增强或扩展任意 Nuxt 应用。",{"path":289,"title":290,"description":291},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-routing","自定义路由","在 Nuxt 中，你的路由由 pages 目录内文件的结构定义。不过，由于底层使用了 vue-router，Nuxt 提供了几种在你的项目中添加自定义路由的方式。",{"path":293,"title":294,"description":295},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fvite-plugin","在 Nuxt 中使用 Vite 插件","学习如何将 Vite 插件集成到你的 Nuxt 项目中。",{"path":297,"title":298,"description":299},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-usefetch","Nuxt 中的自定义 useFetch","如何在 Nuxt 中创建用于调用你外部 API 的自定义 fetcher。",{"path":301,"title":302,"description":303},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fsessions-and-authentication","会话与鉴权","鉴权是 Web 应用中极其常见的需求。本配方将向你展示如何在你的 Nuxt 应用中实现基本的用户注册与鉴权。",{"path":305,"title":306,"description":307},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fevents","创建自定义事件","Nuxt 提供了一个由 hookable 驱动的强大事件系统。",{"path":309,"title":310,"description":311},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features","实验性特性","启用 Nuxt 实验性特性以解锁新的可能性。",{"path":313,"title":314,"description":315},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Ffeatures","特性开关","启用或禁用可选的 Nuxt 特性，以解锁新的可能性。",{"path":317,"title":318,"description":319},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Finternals","Nuxt 是如何工作的？","Nuxt 是一个极简但高度可定制的框架，用于构建 Web 应用。",{"path":321,"title":322,"description":323},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fruntime-config","运行时配置","Nuxt 提供了一套运行时配置 API，以在你的应用内暴露配置和密钥。",{"path":325,"title":326,"description":327},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel","Nightly 发布通道","nightly 发布通道允许使用直接从仓库最新提交构建的 Nuxt。",{"path":329,"title":330,"description":331},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fhooks","生命周期钩子","Nuxt 提供了一个强大的钩子系统，可使用钩子扩展几乎每个方面。",{"path":333,"title":334,"description":335},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fkit","Nuxt Kit","@nuxt\u002Fkit 提供了面向模块作者的功能。",{"path":337,"title":338,"description":339},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnuxt-app","NuxtApp","在 Nuxt 中，你可以在组合式函数、组件和插件中访问运行时应用上下文。",{"path":341,"title":342,"description":343},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Flayers","编写 Nuxt Layers","Nuxt 提供了一个强大的系统，允许你扩展默认文件、配置等等。",{"path":345,"title":346,"description":347},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fbuilders","创建 Builder","了解 Nuxt builder 是如何工作的，以及如何编写你自己的 builder。",{"path":349,"title":350,"description":351},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fdebugging","调试","在 Nuxt 中，你可以直接在浏览器中以及你的 IDE 里开始调试你的应用。",{"path":353,"title":354,"description":354},"\u002Fdocs\u002Fguide\u002Fgoing-further","",{"path":356,"title":357,"description":358},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fclient-only","\u003CClientOnly>","使用 \u003CClientOnly> 组件仅在客户端渲染组件。",{"path":360,"title":361,"description":362},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fdev-only","\u003CDevOnly>","使用 \u003CDevOnly> 组件仅在开发期间渲染组件。",{"path":364,"title":365,"description":366},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback","\u003CNuxtClientFallback>","Nuxt 提供了 \u003CNuxtClientFallback> 组件，当其任意子组件在 SSR 中触发错误时，在客户端渲染其内容",{"path":368,"title":369,"description":370},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-picture","\u003CNuxtPicture>","Nuxt 提供了 \u003CNuxtPicture> 组件来处理自动图像优化。",{"path":372,"title":373,"description":374},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fteleports","\u003CTeleport>","\u003CTeleport> 组件将组件传送到 DOM 中的另一个位置。",{"path":376,"title":377,"description":378},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer","\u003CNuxtRouteAnnouncer>","\u003CNuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素，用于向辅助技术播报路由变化。",{"path":380,"title":381,"description":382},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-time","\u003CNuxtTime>","\u003CNuxtTime> 组件以本地化友好的格式显示时间，并保持服务端-客户端一致。",{"path":384,"title":385,"description":386},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-announcer","\u003CNuxtAnnouncer>","\u003CNuxtAnnouncer> 组件添加一个隐藏元素，用于向辅助技术播报动态内容变化。",{"path":388,"title":389,"description":390},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-page","\u003CNuxtPage>","\u003CNuxtPage> 组件用于显示位于 pages\u002F 目录中的页面。",{"path":392,"title":393,"description":394},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-layout","\u003CNuxtLayout>","Nuxt 提供了 \u003CNuxtLayout> 组件，用于在页面和错误页面上显示布局。",{"path":396,"title":397,"description":398},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-link","\u003CNuxtLink>","Nuxt 提供了 \u003CNuxtLink> 组件来处理应用内的各类链接。",{"path":400,"title":401,"description":402},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator","\u003CNuxtLoadingIndicator>","在页面导航之间显示进度条。",{"path":404,"title":405,"description":406},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-error-boundary","\u003CNuxtErrorBoundary>","\u003CNuxtErrorBoundary> 组件处理其默认插槽中发生的客户端错误。",{"path":408,"title":409,"description":410},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-welcome","\u003CNuxtWelcome>","\u003CNuxtWelcome> 组件用于欢迎通过启动模板创建的新项目的用户。",{"path":412,"title":413,"description":414},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-island","\u003CNuxtIsland>","Nuxt 提供了 \u003CNuxtIsland> 组件，用于渲染无客户端 JS 的非交互式组件。",{"path":416,"title":417,"description":418},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-img","\u003CNuxtImg>","Nuxt 提供了 \u003CNuxtImg> 组件来处理自动图像优化。",{"path":420,"title":421,"description":422},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-async-data","createUseAsyncData","一个工厂函数，用于创建带有预定义默认选项的自定义 useAsyncData 组合式函数。",{"path":424,"title":425,"description":426},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-fetch","createUseFetch","一个工厂函数，用于创建带有预定义默认选项的自定义 useFetch 组合式函数。",{"path":428,"title":429,"description":430},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fon-prehydrate","onPrehydrate","使用 onPrehydrate 在 Nuxt 对页面进行 hydration 之前的客户端立即运行回调。",{"path":432,"title":433,"description":434},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-announcer","useAnnouncer","一个用于向屏幕阅读器播报消息的组合式函数。",{"path":436,"title":437,"description":438},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-app-config","useAppConfig","访问在项目中定义的可响应 app config。",{"path":440,"title":441,"description":442},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-async-data","useAsyncData","useAsyncData 以 SSR 友好的方式提供对异步解析数据的访问。",{"path":444,"title":445,"description":446},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-cookie","useCookie","useCookie 是一个 SSR 友好的组合式函数，用于读写 cookie。",{"path":448,"title":449,"description":450},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-error","useError","useError 组合式函数返回正在被处理的全局 Nuxt 错误。",{"path":452,"title":453,"description":454},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch","useFetch","使用 SSR 友好的组合式函数从 API 端点获取数据。",{"path":456,"title":457,"description":458},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head","useHead","useHead 用于自定义 Nuxt 应用各个页面的 head 属性。",{"path":460,"title":461,"description":462},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head-safe","useHeadSafe","处理用户输入时提供 head 数据的推荐方式。",{"path":464,"title":465,"description":466},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-hydration","useHydration","允许完全控制 hydration 周期，以便从服务端设置和接收数据。",{"path":468,"title":469,"description":470},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-layout","useLayout","useLayout 返回为当前路由解析出的布局。",{"path":472,"title":473,"description":474},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-async-data","useLazyAsyncData","该组合式函数包装 useAsyncData，会在 handler 解析之前立即触发导航。",{"path":476,"title":477,"description":478},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch","useLazyFetch","该组合式函数是对 useFetch 的封装，会在 handler 解析之前立即触发导航。",{"path":480,"title":481,"description":482},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","useLoadingIndicator","该组合式函数让你访问应用页面的加载状态。",{"path":484,"title":485,"description":486},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app","useNuxtApp","访问 Nuxt 应用的共享运行时上下文。",{"path":488,"title":489,"description":490},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-data","useNuxtData","访问数据获取组合式函数的当前缓存值。",{"path":492,"title":493,"description":494},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode","usePreviewMode","使用 usePreviewMode 检查并控制 Nuxt 的预览模式",{"path":496,"title":497,"description":498},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-event","useRequestEvent","使用 useRequestEvent 组合式函数访问传入的请求事件。",{"path":500,"title":501,"description":502},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-fetch","useRequestFetch","使用 useRequestFetch 组合式函数为服务端 fetch 请求转发请求上下文和请求头。",{"path":504,"title":505,"description":506},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-header","useRequestHeader","使用 useRequestHeader 访问某个特定的传入请求头。",{"path":508,"title":509,"description":510},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-headers","useRequestHeaders","使用 useRequestHeaders 访问传入的请求头。",{"path":512,"title":513,"description":514},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-url","useRequestURL","使用 useRequestURL 组合式函数访问传入的请求 URL。",{"path":516,"title":517,"description":518},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-response-header","useResponseHeader","使用 useResponseHeader 设置服务端响应头。",{"path":520,"title":521,"description":522},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route","useRoute","useRoute 组合式函数返回当前路由。",{"path":524,"title":525,"description":526},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route-announcer","useRouteAnnouncer","该组合式函数监视页面标题变化，并相应地更新播报消息。",{"path":528,"title":529,"description":530},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-router","useRouter","useRouter 组合式函数返回 router 实例。",{"path":532,"title":533,"description":534},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-config","useRuntimeConfig","使用 useRuntimeConfig 组合式函数访问运行时配置变量。",{"path":536,"title":537,"description":538},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-hook","useRuntimeHook","在 Nuxt 应用中注册一个运行时钩子，并确保在作用域销毁时被正确清理。",{"path":540,"title":541,"description":542},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-seo-meta","useSeoMeta","useSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":544,"title":545,"description":546},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-server-seo-meta","useServerSeoMeta","useServerSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":548,"title":549,"description":550},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-state","useState","useState 组合式函数创建一个可响应的、SSR 友好的共享状态。",{"path":552,"title":553,"description":554},"\u002Fdocs\u002Fapi\u002Futils\u002Fdollarfetch","$fetch","Nuxt 使用 ofetch 全局暴露了 $fetch 辅助函数，用于发起 HTTP 请求。",{"path":556,"title":557,"description":558},"\u002Fdocs\u002Fapi\u002Futils\u002Fabort-navigation","abortNavigation","abortNavigation 是一个辅助函数，用于阻止导航的发生，并在设置了参数时抛出错误。",{"path":560,"title":561,"description":562},"\u002Fdocs\u002Fapi\u002Futils\u002Fadd-route-middleware","addRouteMiddleware","addRouteMiddleware() 是一个在你的应用中动态添加中间件的辅助函数。",{"path":564,"title":565,"description":566},"\u002Fdocs\u002Fapi\u002Futils\u002Fcall-once","callOnce","在 SSR 或 CSR 期间只运行一次给定的函数或代码块。",{"path":568,"title":569,"description":570},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-error","clearError","clearError 组合式函数清除所有已处理的错误。",{"path":572,"title":573,"description":574},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-data","clearNuxtData","删除 useAsyncData 和 useFetch 的缓存数据、错误状态和挂起的 promise。",{"path":576,"title":577,"description":578},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-state","clearNuxtState","删除 useState 的缓存状态。",{"path":580,"title":581,"description":582},"\u002Fdocs\u002Fapi\u002Futils\u002Fcreate-error","createError","创建一个带有附加元数据的错误对象。",{"path":584,"title":585,"description":586},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-lazy-hydration-component","defineLazyHydrationComponent","使用特定策略定义一个懒加载 hydration 组件。",{"path":588,"title":589,"description":590},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-component","defineNuxtComponent","defineNuxtComponent() 是一个用于使用 Options API 定义类型安全组件的辅助函数。",{"path":592,"title":593,"description":594},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-plugin","defineNuxtPlugin","defineNuxtPlugin() 是一个用于创建 Nuxt 插件的辅助函数。",{"path":596,"title":597,"description":598},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-route-middleware","defineNuxtRouteMiddleware","使用 defineNuxtRouteMiddleware 辅助函数创建命名路由中间件。",{"path":600,"title":601,"description":602},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-page-meta","definePageMeta","为你的页面组件定义元数据。",{"path":604,"title":605,"description":606},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-route-rules","defineRouteRules","在页面层面定义用于混合渲染的路由规则。",{"path":608,"title":609,"description":610},"\u002Fdocs\u002Fapi\u002Futils\u002Fnavigate-to","navigateTo","navigateTo 是一个用于以编程方式导航用户的辅助函数。",{"path":612,"title":613,"description":614},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-leave","onBeforeRouteLeave","onBeforeRouteLeave 组合式函数允许在组件内部注册一个路由守卫。",{"path":616,"title":617,"description":618},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-update","onBeforeRouteUpdate","onBeforeRouteUpdate 组合式函数允许在组件内部注册一个路由守卫。",{"path":620,"title":621,"description":622},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-nuxt-ready","onNuxtReady","onNuxtReady 组合式函数允许在你的应用完成初始化之后运行一个回调。",{"path":624,"title":625,"description":626},"\u002Fdocs\u002Fapi\u002Futils\u002Fprefetch-components","prefetchComponents","Nuxt 提供了用于在预取组件方面给予你控制的工具。",{"path":628,"title":629,"description":630},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-components","preloadComponents","Nuxt 提供了用于在预加载组件方面给予你控制的工具。",{"path":632,"title":633,"description":634},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-route-components","preloadRouteComponents","preloadRouteComponents 允许你手动预加载 Nuxt 应用中的单个页面。",{"path":636,"title":637,"description":638},"\u002Fdocs\u002Fapi\u002Futils\u002Fprerender-routes","prerenderRoutes","prerenderRoutes 向 Nitro 暗示预渲染一个额外的路由。",{"path":640,"title":641,"description":642},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-cookie","refreshCookie","当 cookie 发生变化时，手动刷新 useCookie 的值",{"path":644,"title":645,"description":646},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-nuxt-data","refreshNuxtData","刷新 Nuxt 中所有或特定的 asyncData 实例",{"path":648,"title":649,"description":650},"\u002Fdocs\u002Fapi\u002Futils\u002Freload-nuxt-app","reloadNuxtApp","reloadNuxtApp 会对页面执行一次硬刷新。",{"path":652,"title":653,"description":654},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-page-layout","setPageLayout","setPageLayout 允许你动态更改页面的布局。",{"path":656,"title":657,"description":658},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-response-status","setResponseStatus","setResponseStatus 设置响应的状态码（以及可选的 statusText）。",{"path":660,"title":661,"description":662},"\u002Fdocs\u002Fapi\u002Futils\u002Fshow-error","showError","Nuxt 提供了一种快速且简单的方式，在需要的时候显示全屏错误页。",{"path":664,"title":665,"description":666},"\u002Fdocs\u002Fapi\u002Futils\u002Fupdate-app-config","updateAppConfig","在运行时更新 App Config。",{"path":668,"title":669,"description":670},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fadd","nuxt add","在你的 Nuxt 应用中快速搭建一个实体（文件）。",{"path":672,"title":673,"description":674},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fanalyze","nuxt analyze","分析生产环境的打包产物或你的 Nuxt 应用。",{"path":676,"title":677,"description":678},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild","nuxt build","构建你的 Nuxt 应用。",{"path":680,"title":681,"description":682},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild-module","nuxt build-module","用于在发布前构建你的 Nuxt 模块的 Nuxt 命令。",{"path":684,"title":685,"description":686},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fcleanup","nuxt cleanup","移除常见的 Nuxt 生成文件和缓存。",{"path":688,"title":689,"description":690},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdev","nuxt dev","dev 命令会在 http:\u002F\u002Flocalhost:3000 启动一个带有热模块替换（HMR）的开发服务器。",{"path":692,"title":693,"description":694},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdevtools","nuxt devtools","devtools 命令允许你基于每个项目启用或禁用 Nuxt DevTools。",{"path":696,"title":697,"description":698},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fgenerate","nuxt generate","预渲染应用的每一个路由，并将结果存储为纯 HTML 文件。",{"path":700,"title":701,"description":702},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finfo","nuxt info","info 命令会记录当前或指定 Nuxt 项目的相关信息。",{"path":704,"title":705,"description":706},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finit","create nuxt","init 命令用于初始化一个全新的 Nuxt 项目。",{"path":708,"title":709,"description":710},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fmodule","nuxt module","通过命令行搜索并向你的 Nuxt 应用添加模块。",{"path":712,"title":713,"description":714},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fprepare","nuxt prepare","prepare 命令会在你的应用中创建一个 .nuxt 目录并生成类型。",{"path":716,"title":717,"description":718},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fpreview","nuxt preview","preview 命令会启动一个服务器，用于在运行 build 命令后预览你的应用。",{"path":720,"title":721,"description":722},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftest","nuxt test","test 命令使用 @nuxt\u002Ftest-utils 运行测试。",{"path":724,"title":725,"description":726},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftypecheck","nuxt typecheck","typecheck 命令运行 vue-tsc 来全量检查你的应用类型。",{"path":728,"title":729,"description":730},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fupgrade","nuxt upgrade","upgrade 命令将 Nuxt 升级到最新版本。",{"path":732,"title":733,"description":734},"\u002Fdocs\u002Fapi\u002Fkit\u002Fmodules","Modules","Nuxt Kit 提供了一系列工具，帮助你创建和使用模块。你可以使用这些工具来创建自己的模块，或复用已有的模块。",{"path":736,"title":737,"description":738},"\u002Fdocs\u002Fapi\u002Fkit\u002Fruntime-config","Runtime Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 运行时配置。",{"path":740,"title":741,"description":742},"\u002Fdocs\u002Fapi\u002Fkit\u002Ftemplates","Templates","Nuxt Kit 提供了一系列工具，帮助你处理模板。这些函数允许你在开发和构建期间生成额外的文件。",{"path":744,"title":745,"description":746},"\u002Fdocs\u002Fapi\u002Fkit\u002Fapp-config","App Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 应用配置。",{"path":748,"title":749,"description":750},"\u002Fdocs\u002Fapi\u002Fkit\u002Fnitro","Nitro","Nuxt Kit 提供了一系列工具，帮助你使用 Nitro。这些函数允许你添加服务器处理器、插件和预渲染路由。",{"path":752,"title":753,"description":754},"\u002Fdocs\u002Fapi\u002Fkit\u002Fresolving","Resolving","Nuxt Kit 提供了从 Nuxt 根目录或自定义基准路径解析路径的实用工具。",{"path":756,"title":757,"description":758},"\u002Fdocs\u002Fapi\u002Fkit\u002Flogging","Logging","Nuxt Kit 提供了一系列工具，帮助你使用日志记录。这些函数允许你以额外功能记录消息。",{"path":760,"title":761,"description":762},"\u002Fdocs\u002Fapi\u002Fkit\u002Fbuilder","Builder","Nuxt Kit 提供了一系列工具，帮助你使用构建器。这些函数允许你扩展 Vite 和 webpack 配置。",{"path":764,"title":765,"description":766},"\u002Fdocs\u002Fapi\u002Fkit\u002Fexamples","Examples","Nuxt Kit 工具的使用示例。",{"path":768,"title":58,"description":769},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayers","Nuxt Kit 提供了帮助你处理层及其目录结构的工具。",{"path":771,"title":772,"description":773},"\u002Fdocs\u002Fapi\u002Fkit\u002Fprogrammatic","Programmatic Usage","Nuxt Kit 提供了一系列工具，帮助你以编程方式使用 Nuxt。这些函数允许你加载 Nuxt、构建 Nuxt，以及加载 Nuxt 配置。",{"path":775,"title":776,"description":777},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcompatibility","Compatibility","Nuxt Kit 提供了一系列工具，帮助你检查模块与不同 Nuxt 版本的兼容性。",{"path":779,"title":780,"description":781},"\u002Fdocs\u002Fapi\u002Fkit\u002Fautoimports","Auto-imports","Nuxt Kit 提供了一系列工具，帮助你处理自动导入。这些函数允许你注册自己的 utils、composables 和 Vue API。",{"path":783,"title":784,"description":785},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcomponents","Components","Nuxt Kit 提供了一系列工具，帮助你处理组件。你可以全局或局部注册组件，也可以添加要被扫描的目录。",{"path":787,"title":788,"description":789},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcontext","Context","Nuxt Kit 提供了一系列工具，帮助你处理上下文。",{"path":791,"title":792,"description":793},"\u002Fdocs\u002Fapi\u002Fkit\u002Fpages","Pages","Nuxt Kit 提供了一系列工具，帮助你创建和使用页面。你可以使用这些工具来操作页面配置或定义路由规则。",{"path":795,"title":796,"description":797},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayout","Layout","Nuxt Kit 提供了一系列工具，帮助你处理布局。",{"path":799,"title":800,"description":801},"\u002Fdocs\u002Fapi\u002Fkit\u002Fhead","Head","Nuxt Kit 提供了一系列工具，帮助你在模块中管理 head 配置。",{"path":803,"title":804,"description":805},"\u002Fdocs\u002Fapi\u002Fkit\u002Fplugins","Plugins","Nuxt Kit 提供了一系列工具，帮助你创建和使用插件。你可以使用这些函数向你的模块添加插件或插件模板。",{"path":807,"title":330,"description":808},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fhooks","Nuxt 提供了一套强大的钩子系统，可以通过钩子扩展几乎各个方面。",{"path":810,"title":811,"description":812},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fimport-meta","Import meta","使用 `import.meta` 了解你的代码运行在何处。",{"path":814,"title":815,"description":816},"\u002Fdocs\u002Fapi\u002Fnuxt-config","Nuxt 配置","发现你可以在 nuxt.config.ts 文件中使用的所有选项。",{"path":818,"title":819,"description":820},"\u002Fdocs\u002Fapi","Nuxt API 参考","探索所有 Nuxt 内部机制：组件、组合式函数、工具函数、命令等等。",{"path":822,"title":823,"description":824},"\u002Fdocs\u002Fcommunity\u002Fgetting-help","获取帮助","我们是一个友好的开发者社区，很乐意提供帮助。",{"path":826,"title":827,"description":828},"\u002Fdocs\u002Fcommunity\u002Freporting-bugs","报告 Bug","开源中最有价值的角色之一，就是花时间把 bug 报告得清楚明白。",{"path":830,"title":831,"description":832},"\u002Fdocs\u002Fcommunity\u002Fcontribution","贡献","Nuxt 是一个社区项目——因此我们欢迎各种形式的贡献！❤️",{"path":834,"title":835,"description":836},"\u002Fdocs\u002Fcommunity\u002Fframework-contribution","框架贡献","关于向框架仓库贡献的一些具体要点。",{"path":838,"title":839,"description":840},"\u002Fdocs\u002Fcommunity\u002Froadmap","路线图","Nuxt 在不断发展，新功能和模块一直在增加。",{"path":842,"title":843,"description":844},"\u002Fdocs\u002Fcommunity\u002Fchangelog","发布","发现 Nuxt 及 Nuxt 官方模块的最新发布。",{"path":846,"title":847,"description":848},"\u002Fdocs\u002Fbridge\u002Foverview","概述","缩小与 Nuxt 3 的差异，并减轻迁移到 Nuxt 3 的负担。",{"path":850,"title":14,"description":851},"\u002Fdocs\u002Fbridge\u002Fconfiguration","了解如何根据你的需求配置 Nuxt Bridge。",{"path":853,"title":222,"description":854},"\u002Fdocs\u002Fbridge\u002Ftypescript","了解如何在 Nuxt Bridge 中使用 TypeScript。",{"path":856,"title":857,"description":858},"\u002Fdocs\u002Fbridge\u002Fbridge-composition-api","旧版 Composition API","了解如何使用 Nuxt Bridge 迁移到 Composition API。",{"path":860,"title":861,"description":862},"\u002Fdocs\u002Fbridge\u002Fplugins-and-middleware","插件和中间件","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新插件和中间件。",{"path":864,"title":865,"description":866},"\u002Fdocs\u002Fbridge\u002Fnuxt3-compatible-api","新的 Composition API","Nuxt Bridge 实现了与 Nuxt 3 兼容的组合式函数。",{"path":868,"title":869,"description":870},"\u002Fdocs\u002Fbridge\u002Fmeta","Meta 标签","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新 meta 标签。",{"path":872,"title":322,"description":873},"\u002Fdocs\u002Fbridge\u002Fruntime-config","Nuxt 提供了一个运行时配置 API，用于在应用中暴露配置和密钥。",{"path":875,"title":749,"description":876},"\u002Fdocs\u002Fbridge\u002Fnitro","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Nitro。",{"path":878,"title":879,"description":880},"\u002Fdocs\u002Fbridge\u002Fvite","Vite","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Vite。",{"path":882,"title":847,"description":883},"\u002Fdocs\u002Fmigration\u002Foverview","Nuxt 3 是对 Nuxt 2 的完整重写，并且基于一套全新的底层技术。",{"path":885,"title":886,"description":887},"\u002Fdocs\u002Fmigration\u002Fbundling","构建工具","了解如何从 Nuxt 2 迁移到 Nuxt 3 的构建工具。",{"path":889,"title":890,"description":891},"\u002Fdocs\u002Fmigration\u002Fserver","服务器","了解如何从 Nuxt 2 迁移到 Nuxt 3 的服务器。",{"path":893,"title":14,"description":894},"\u002Fdocs\u002Fmigration\u002Fconfiguration","了解如何从 Nuxt 2 迁移到 Nuxt 3 的新配置。",{"path":896,"title":214,"description":897},"\u002Fdocs\u002Fmigration\u002Fmodule-authors","了解如何从 Nuxt 2 迁移到 Nuxt 3 模块。",{"path":899,"title":206,"description":900},"\u002Fdocs\u002Fmigration\u002Fauto-imports","Nuxt 3 采用最小摩擦的方式，即在任何可能的地方自动导入组件和组合式函数。",{"path":902,"title":869,"description":903},"\u002Fdocs\u002Fmigration\u002Fmeta","管理你的 meta 标签，从 Nuxt 2 到 Nuxt 3。",{"path":905,"title":861,"description":906},"\u002Fdocs\u002Fmigration\u002Fplugins-and-middleware","了解如何从 Nuxt 2 迁移到 Nuxt 3 的插件和中间件。",{"path":908,"title":909,"description":910},"\u002Fdocs\u002Fmigration\u002Fpages-and-layouts","页面和布局","了解如何从 Nuxt 2 迁移到 Nuxt 3 的页面和布局。",{"path":912,"title":913,"description":914},"\u002Fdocs\u002Fmigration\u002Fcomponent-options","组件选项","了解如何从 Nuxt 2 的组件选项迁移到 Nuxt 3 的组合式函数。",{"path":916,"title":322,"description":917},"\u002Fdocs\u002Fmigration\u002Fruntime-config","了解如何从 Nuxt 2 迁移到 Nuxt 3 的运行时配置。",{"path":919,"title":920,"description":921},"\u002Fdocs\u002Freadme","Nuxt 文档","本仓库包含 Nuxt 的文档，托管于 https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fintroduction",{"path":923,"title":924,"description":925},"\u002Fdocs\u002Ferrors\u002Fb5001","NUXT_B5001","缺少 compatibilityDate (兼容性日期)",{"path":927,"title":928,"description":929},"\u002Fdocs\u002Ferrors\u002Fb5003","NUXT_B5003","保留的 runtimeConfig.app 命名空间",{"path":931,"title":932,"description":933},"\u002Fdocs\u002Ferrors\u002Fb5004","NUXT_B5004","不支持外部配置文件",{"path":935,"title":936,"description":937},"\u002Fdocs\u002Ferrors\u002Fe1001","NUXT_E1001","在 Nuxt 上下文之外调用了组合式函数。",{"path":939,"title":940,"description":941},"\u002Fdocs\u002Ferrors\u002Fe1006","NUXT_E1006","onPrehydrate 未被构建流水线处理。",{"path":943,"title":944,"description":945},"\u002Fdocs\u002Ferrors\u002Fe1007","NUXT_E1007","编译期提示辅助函数在运行时被调用。",{"path":947,"title":948,"description":949},"\u002Fdocs\u002Ferrors\u002Fe2001","NUXT_E2001","外部导航未设置 external: true。",{"path":951,"title":952,"description":953},"\u002Fdocs\u002Ferrors\u002Fe2002","NUXT_E2002","使用了危险协议的导航。",{"path":955,"title":956,"description":957},"\u002Fdocs\u002Ferrors\u002Fe2003","NUXT_E2003","abortNavigation() 在中间件之外被调用。",{"path":959,"title":960,"description":961},"\u002Fdocs\u002Ferrors\u002Fe2004","NUXT_E2004","未知的路由中间件。",{"path":963,"title":964,"description":965},"\u002Fdocs\u002Ferrors\u002Fe2005","NUXT_E2005","在中间件内调用了 useRoute。",{"path":967,"title":968,"description":969},"\u002Fdocs\u002Ferrors\u002Fe2007","NUXT_E2007","在组件中于服务端调用了 setPageLayout。",{"path":971,"title":972,"description":973},"\u002Fdocs\u002Ferrors\u002Fe3001","NUXT_E3001","useFetch 的请求 URL 以 \"\u002F\u002F\" 开头。",{"path":975,"title":976,"description":977},"\u002Fdocs\u002Ferrors\u002Fe3008","NUXT_E3008","useAsyncData 的 key 必须是非空字符串。",{"path":979,"title":980,"description":981},"\u002Fdocs\u002Ferrors\u002Fe3009","NUXT_E3009","useAsyncData 的处理函数必须是一个函数。",{"path":983,"title":984,"description":985},"\u002Fdocs\u002Ferrors\u002Fe4012","NUXT_E4012","无法解析 island（岛）响应。",{"path":987,"title":988,"description":989},"\u002Fdocs\u002Ferrors\u002Fe4016","NUXT_E4016","嵌套页面无法显示，因为其父页面没有渲染 \u003CNuxtPage \u002F>。",{"path":991,"title":992,"description":993},"\u002Fdocs\u002Ferrors\u002Fe5001","NUXT_E5001","应用清单（app manifest）未启用。",{"path":995,"title":996,"description":997},"\u002Fdocs\u002Ferrors\u002Fe6001","NUXT_E6001","缺少 Unhead 实例。",{"path":999,"title":1000,"description":1001},"\u002Fdocs\u002Ferrors\u002Fe7001","NUXT_E7001","Payload URL 包含主机名。",{"path":1003,"title":1004,"description":1005},"\u002Fdocs\u002Ferrors\u002Fe7007","NUXT_E7007","useState 的初始化值必须是一个函数。",{"path":1007,"title":1008,"description":1009},"\u002Fdocs\u002Ferrors\u002Fe7008","NUXT_E7008","callOnce 的 fn 必须是一个函数。",{"path":1011,"title":1012,"description":1013},"\u002Fdocs\u002Ferrors\u002Fe7009","NUXT_E7009","useState 的 key 必须是一个字符串。",{"path":1015,"title":1016,"description":1017},"\u002Fdocs\u002Ferrors\u002Fe7010","NUXT_E7010","callOnce 的 key 必须是一个字符串。",{"id":1019,"title":194,"body":1020,"description":195,"extension":2631,"meta":2632,"navigation":2633,"path":193,"seo":2634,"stem":2635,"__hash__":2636},"docs\u002Fdocs\u002F3.guide\u002F1.concepts\u002F1.rendering.md",{"type":1021,"value":1022,"toc":2618},"minimark",[1023,1048,1064,1075,1080,1087,1101,1104,1111,1116,1119,1363,1386,1414,1419,1435,1440,1458,1465,1476,1482,1486,1492,1498,1503,1527,1532,1545,1555,1561,1608,1627,2614],[1024,1025,1026,1027,1032,1033,1037,1038,1042,1043,1047],"p",{},"Nuxt 支持不同的渲染模式：",[1028,1029,1031],"a",{"href":1030},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering#universal-rendering","通用渲染","（universal rendering）、",[1028,1034,1036],{"href":1035},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering#client-side-rendering","客户端渲染","（client-side rendering），同时还提供了",[1028,1039,1041],{"href":1040},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering#hybrid-rendering","混合渲染","（hybrid-rendering），以及将你的应用渲染在 ",[1028,1044,1046],{"href":1045},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering#edge-side-rendering","CDN 边缘服务器","（edge-side-rendering）上的可能性。",[1024,1049,1050,1051,1055,1056,1059,1060,1063],{},"浏览器和服务端都可以解释 JavaScript 代码，将 Vue.js 组件转换为 HTML 元素。这一步称为",[1052,1053,1054],"strong",{},"渲染","。Nuxt 同时支持",[1052,1057,1058],{},"通用","渲染和",[1052,1061,1062],{},"客户端","渲染。这两种方法各有利弊，我们会在下文介绍。",[1024,1065,1066,1067,1069,1070,1074],{},"默认情况下，Nuxt 使用",[1052,1068,1031],{},"，以提供更好的用户体验、性能，并优化搜索引擎索引；但你可以通过",[1028,1071,1073],{"href":1072},"\u002Fdocs\u002Fapi\u002Fnuxt-config#ssr","一行配置","切换渲染模式。",[1076,1077,1079],"h2",{"id":1078},"通用渲染universal-rendering","通用渲染（Universal Rendering）",[1024,1081,1082,1083,1086],{},"这一步类似于传统由 PHP 或 Ruby 应用执行的",[1052,1084,1085],{},"服务端渲染","。当浏览器请求一个启用了通用渲染的 URL 时，Nuxt 会在服务端环境中运行 JavaScript（Vue.js）代码，并将一个完全渲染好的 HTML 页面返回给浏览器。如果该页面是提前生成的，Nuxt 也可能从缓存中返回一个完全渲染好的 HTML 页面。与客户端渲染相反，用户可以立即获取到应用的初始内容的全部内容。",[1024,1088,1089,1090,1093,1094,1096,1097,1100],{},"一旦下载了 HTML 文档，浏览器会对其进行解释，然后 Vue.js 接管该文档。先前在服务端运行的同一份 JavaScript 代码会",[1052,1091,1092],{},"再次","在客户端（浏览器）中于后台运行，通过将监听器绑定到 HTML 上，从而启用交互能力（这就是",[1052,1095,1031],{},"的由来）。这被称为",[1052,1098,1099],{},"水合（Hydration）","。水合完成后，页面就能享受诸如动态界面和页面过渡等优势。",[1024,1102,1103],{},"通用渲染让 Nuxt 应用能够提供快速的页面加载时间，同时保留客户端渲染的好处。此外，由于内容已经存在于 HTML 文档中，爬虫无需额外开销即可对其进行索引。",[1024,1105,1106],{},[1107,1108],"img",{"alt":1109,"src":1110},"用户可以在 HTML 文档加载时访问静态内容。随后水合让页面具有交互能力","https:\u002F\u002Fnuxt.com\u002Fassets\u002Fdocs\u002Fconcepts\u002Frendering\u002Fssr.svg",[1024,1112,1113],{},[1052,1114,1115],{},"哪些是服务端渲染的，哪些是客户端渲染的？",[1024,1117,1118],{},"在通用渲染模式下，自然会有人问：一个 Vue 文件的哪些部分运行在服务端、哪些部分运行在客户端（或两者皆有）。",[1120,1121,1126],"pre",{"className":1122,"code":1123,"filename":1124,"language":1125,"meta":354,"style":354},"language-vue shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst counter = ref(0) \u002F\u002F 在服务端和客户端环境中都执行\n\nconst handleClick = () => {\n  counter.value++ \u002F\u002F 仅在客户端环境中执行\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Count: {{ counter }}\u003C\u002Fp>\n    \u003Cbutton @click=\"handleClick\">\n      增加\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fapp.vue","vue",[1127,1128,1129,1165,1199,1206,1226,1244,1250,1260,1265,1275,1286,1306,1328,1334,1344,1354],"code",{"__ignoreMap":354},[1130,1131,1134,1138,1142,1146,1149,1152,1156,1160,1162],"span",{"class":1132,"line":1133},"line",1,[1130,1135,1137],{"class":1136},"sF54B","\u003C",[1130,1139,1141],{"class":1140},"s6g6u","script",[1130,1143,1145],{"class":1144},"sXjFp"," setup",[1130,1147,1148],{"class":1144}," lang",[1130,1150,1151],{"class":1136},"=",[1130,1153,1155],{"class":1154},"s0jeK","\"",[1130,1157,1159],{"class":1158},"s-Aze","ts",[1130,1161,1155],{"class":1154},[1130,1163,1164],{"class":1136},">\n",[1130,1166,1168,1172,1176,1180,1184,1188,1192,1195],{"class":1132,"line":1167},2,[1130,1169,1171],{"class":1170},"sV7Px","const",[1130,1173,1175],{"class":1174},"sJTDI"," counter",[1130,1177,1179],{"class":1178},"sXPRQ"," =",[1130,1181,1183],{"class":1182},"srJn9"," ref",[1130,1185,1187],{"class":1186},"smVNa","(",[1130,1189,1191],{"class":1190},"sOUxV","0",[1130,1193,1194],{"class":1186},") ",[1130,1196,1198],{"class":1197},"sZqJ9","\u002F\u002F 在服务端和客户端环境中都执行\n",[1130,1200,1202],{"class":1132,"line":1201},3,[1130,1203,1205],{"emptyLinePlaceholder":1204},true,"\n",[1130,1207,1209,1211,1215,1217,1220,1223],{"class":1132,"line":1208},4,[1130,1210,1171],{"class":1170},[1130,1212,1214],{"class":1213},"s5Y2e"," handleClick",[1130,1216,1179],{"class":1178},[1130,1218,1219],{"class":1136}," ()",[1130,1221,1222],{"class":1170}," =>",[1130,1224,1225],{"class":1136}," {\n",[1130,1227,1229,1232,1235,1238,1241],{"class":1132,"line":1228},5,[1130,1230,1231],{"class":1186},"  counter",[1130,1233,1234],{"class":1136},".",[1130,1236,1237],{"class":1186},"value",[1130,1239,1240],{"class":1178},"++",[1130,1242,1243],{"class":1197}," \u002F\u002F 仅在客户端环境中执行\n",[1130,1245,1247],{"class":1132,"line":1246},6,[1130,1248,1249],{"class":1136},"}\n",[1130,1251,1253,1256,1258],{"class":1132,"line":1252},7,[1130,1254,1255],{"class":1136},"\u003C\u002F",[1130,1257,1141],{"class":1140},[1130,1259,1164],{"class":1136},[1130,1261,1263],{"class":1132,"line":1262},8,[1130,1264,1205],{"emptyLinePlaceholder":1204},[1130,1266,1268,1270,1273],{"class":1132,"line":1267},9,[1130,1269,1137],{"class":1136},[1130,1271,1272],{"class":1140},"template",[1130,1274,1164],{"class":1136},[1130,1276,1278,1281,1284],{"class":1132,"line":1277},10,[1130,1279,1280],{"class":1136},"  \u003C",[1130,1282,1283],{"class":1140},"div",[1130,1285,1164],{"class":1136},[1130,1287,1289,1292,1294,1297,1300,1302,1304],{"class":1132,"line":1288},11,[1130,1290,1291],{"class":1136},"    \u003C",[1130,1293,1024],{"class":1140},[1130,1295,1296],{"class":1136},">",[1130,1298,1299],{"class":1186},"Count: {{ counter }}",[1130,1301,1255],{"class":1136},[1130,1303,1024],{"class":1140},[1130,1305,1164],{"class":1136},[1130,1307,1309,1311,1314,1317,1319,1321,1324,1326],{"class":1132,"line":1308},12,[1130,1310,1291],{"class":1136},[1130,1312,1313],{"class":1140},"button",[1130,1315,1316],{"class":1144}," @click",[1130,1318,1151],{"class":1136},[1130,1320,1155],{"class":1154},[1130,1322,1323],{"class":1158},"handleClick",[1130,1325,1155],{"class":1154},[1130,1327,1164],{"class":1136},[1130,1329,1331],{"class":1132,"line":1330},13,[1130,1332,1333],{"class":1186},"      增加\n",[1130,1335,1337,1340,1342],{"class":1132,"line":1336},14,[1130,1338,1339],{"class":1136},"    \u003C\u002F",[1130,1341,1313],{"class":1140},[1130,1343,1164],{"class":1136},[1130,1345,1347,1350,1352],{"class":1132,"line":1346},15,[1130,1348,1349],{"class":1136},"  \u003C\u002F",[1130,1351,1283],{"class":1140},[1130,1353,1164],{"class":1136},[1130,1355,1357,1359,1361],{"class":1132,"line":1356},16,[1130,1358,1255],{"class":1136},[1130,1360,1272],{"class":1140},[1130,1362,1164],{"class":1136},[1024,1364,1365,1366,1369,1370,1373,1374,1376,1377,1379,1380,1382,1383,1385],{},"在初始请求时，由于 ",[1127,1367,1368],{},"counter"," ref 被渲染在 ",[1127,1371,1372],{},"\u003Cp>"," 标签内，它会在服务端初始化。",[1127,1375,1323],{}," 的函数体永远不会在这里执行。在浏览器的水合过程中，",[1127,1378,1368],{}," ref 被重新初始化。",[1127,1381,1323],{}," 最终才绑定到按钮上；因此可以合理推断 ",[1127,1384,1323],{}," 的函数体将始终在浏览器环境中运行。",[1024,1387,1388,1391,1392,1395,1396,1399,1400,1403,1404,1391,1407,1413],{},[1028,1389,1390],{"href":101},"中间件","和",[1028,1393,1394],{"href":105},"页面","在水合期间运行于服务端和客户端。",[1028,1397,1398],{"href":109},"插件","可以运行在服务端、客户端或两者。",[1028,1401,1402],{"href":89},"组件","也可以被强制为仅客户端运行。",[1028,1405,1406],{"href":93},"组合式函数",[1028,1408,1412],{"href":1409,"rel":1410},"\u002F\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Futils",[1411],"nofollow","工具函数","则根据它们的使用上下文来决定运行位置。",[1024,1415,1416],{},[1052,1417,1418],{},"服务端渲染的好处：",[1420,1421,1422,1429],"ul",{},[1423,1424,1425,1428],"li",{},[1052,1426,1427],{},"性能","：用户可以立即访问页面内容，因为浏览器显示静态内容的速度远比显示 JavaScript 生成的内容快。与此同时，Nuxt 在水合过程中保留了 Web 应用的交互能力。",[1423,1430,1431,1434],{},[1052,1432,1433],{},"搜索引擎优化（SEO）","：通用渲染会像传统的服务端应用那样，将页面的完整 HTML 内容交付给浏览器。网络爬虫可以直接索引页面内容，这使得通用渲染成为任何你希望被快速索引的内容的理想选择。",[1024,1436,1437],{},[1052,1438,1439],{},"服务端渲染的缺点：",[1420,1441,1442,1448],{},[1423,1443,1444,1447],{},[1052,1445,1446],{},"开发约束","：服务端和浏览器环境提供的 API 并不相同，编写能无缝运行在两端上的代码可能很棘手。不过，Nuxt 提供了指导原则和特定变量来帮助你判断某段代码在哪里执行。",[1423,1449,1450,1453,1454,1457],{},[1052,1451,1452],{},"成本","：为了让页面按需渲染，需要有一个运行中的服务器。这就像任何传统服务器一样，会产生月度成本。不过，由于浏览器在客户端导航时接管了后续请求，服务端调用被大幅减少。通过利用",[1028,1455,1456],{"href":1045},"边缘端渲染","还可以进一步降低成本。",[1024,1459,1460,1461,1464],{},"通用渲染非常通用，几乎能适应任何用例，尤其适合任何面向内容的网站：",[1052,1462,1463],{},"博客、营销网站、作品集、电商网站和集市","。",[1466,1467,1468],"tip",{},[1024,1469,1470,1471,1464],{},"关于如何编写不会出现水合不匹配（hydration mismatch）的 Vue 代码，请参阅 ",[1028,1472,1475],{"href":1473,"rel":1474},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fscaling-up\u002Fssr#hydration-mismatch",[1411],"Vue 文档",[1477,1478,1479],"important",{},[1024,1480,1481],{},"当导入一个依赖浏览器 API 且带有副作用的库时，请确保导入它的组件只在客户端被调用。打包工具不会对包含副作用的模块导入进行 tree-shaking。",[1076,1483,1485],{"id":1484},"客户端渲染client-side-rendering","客户端渲染（Client-Side Rendering）",[1024,1487,1488,1489,1491],{},"开箱即用时，传统的 Vue.js 应用是在浏览器（或",[1052,1490,1062],{},"）中渲染的。随后，在浏览器下载并解析了包含所有用于创建当前界面指令的 JavaScript 代码之后，Vue.js 才会生成 HTML 元素。",[1024,1493,1494],{},[1107,1495],{"alt":1496,"src":1497},"用户必须等待浏览器下载、解析并执行 JavaScript 才能看到页面内容","https:\u002F\u002Fnuxt.com\u002Fassets\u002Fdocs\u002Fconcepts\u002Frendering\u002Fcsr.svg",[1024,1499,1500],{},[1052,1501,1502],{},"客户端渲染的好处：",[1420,1504,1505,1515,1521],{},[1423,1506,1507,1510,1511,1514],{},[1052,1508,1509],{},"开发速度","：当完全在客户端工作时，我们无需担心代码的服务端兼容性，例如使用像 ",[1127,1512,1513],{},"window"," 对象这样仅限浏览器的 API。",[1423,1516,1517,1520],{},[1052,1518,1519],{},"更便宜","：运行服务器会增加基础设施成本，因为你需要运行在一个支持 JavaScript 的平台上。我们可以将纯客户端应用托管在任何带有 HTML、CSS 和 JavaScript 文件的静态服务器上。",[1423,1522,1523,1526],{},[1052,1524,1525],{},"离线","：由于代码完全运行在浏览器中，它可以在网络不可用时很好地继续保持工作。",[1024,1528,1529],{},[1052,1530,1531],{},"客户端渲染的缺点：",[1420,1533,1534,1539],{},[1423,1535,1536,1538],{},[1052,1537,1427],{},"：用户必须等待浏览器下载、解析并运行 JavaScript 文件。这取决于网络（下载部分）和用户设备（解析和执行部分），这可能会耗费一些时间并影响用户体验。",[1423,1540,1541,1544],{},[1052,1542,1543],{},"搜索引擎优化","：索引和更新通过客户端渲染交付的内容，比使用服务端渲染的 HTML 文档需要更长时间。这与我们讨论过的性能缺点相关，因为搜索引擎爬虫在首次尝试索引页面时，不会等待界面被完全渲染。使用纯客户端渲染，你的内容会在搜索结果页中需要更长时间才能显示和更新。",[1024,1546,1547,1548,1551,1552,1464],{},"客户端渲染适合交互性强的",[1052,1549,1550],{},"Web 应用","，这些应用不需要被索引，或者用户会频繁访问。它可以利用浏览器缓存来跳过后续访问时的下载阶段，例如 ",[1052,1553,1554],{},"SaaS、后台应用或在线游戏",[1024,1556,1557,1558,1560],{},"你可以在 ",[1127,1559,174],{}," 中通过 Nuxt 启用仅客户端渲染：",[1120,1562,1565],{"className":1563,"code":1564,"filename":174,"language":1159,"meta":354,"style":354},"language-ts shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","export default defineNuxtConfig({\n  ssr: false,\n})\n",[1127,1566,1567,1584,1600],{"__ignoreMap":354},[1130,1568,1569,1573,1576,1579,1581],{"class":1132,"line":1133},[1130,1570,1572],{"class":1571},"szyBz","export",[1130,1574,1575],{"class":1571}," default",[1130,1577,1578],{"class":1182}," defineNuxtConfig",[1130,1580,1187],{"class":1186},[1130,1582,1583],{"class":1136},"{\n",[1130,1585,1586,1590,1593,1597],{"class":1132,"line":1167},[1130,1587,1589],{"class":1588},"sOtFm","  ssr",[1130,1591,1592],{"class":1136},":",[1130,1594,1596],{"class":1595},"si1Qm"," false",[1130,1598,1599],{"class":1136},",\n",[1130,1601,1602,1605],{"class":1132,"line":1201},[1130,1603,1604],{"class":1136},"}",[1130,1606,1607],{"class":1186},")\n",[1609,1610,1611,1622],"note",{},[1024,1612,1613,1614,1617,1618,1621],{},"如果你确实使用 ",[1127,1615,1616],{},"ssr: false","，你还应该在 ",[1127,1619,1620],{},"~\u002Fspa-loading-template.html"," 中放置一个 HTML 文件，其中包含你希望用于渲染加载屏幕的 HTML，该屏幕会在你的应用完成水合之前显示。",[1623,1624],"read-more",{"title":1625,"to":1626},"SPA 加载模板","\u002Fdocs\u002Fapi\u002Fconfiguration\u002Fnuxt-config#spaloadingtemplate",[1628,1629,1632,1636,1651,1663,1678,1689,1771,1774,1788,1793,1796,1812,1826,1829,1848,2029,2033,2036,2039,2042,2051,2315,2318,2321,2488,2507,2510,2520,2525,2539,2543,2546,2549,2555,2566,2569,2609],"video-accordion",{"title":1630,"video-id":1631},"观看 Alexander Lichter 关于使用 Nuxt 构建纯 SPA 的视频","7Lr0QTP1Ro8",[1633,1634,1635],"h3",{"id":1635},"部署静态的客户端渲染应用",[1024,1637,1638,1639,1641,1642,1645,1646,1650],{},"如果你使用 ",[1127,1640,697],{}," 或 ",[1127,1643,1644],{},"nuxt build --prerender"," 命令将应用部署到",[1028,1647,1649],{"href":1648},"\u002Fdocs\u002Fgetting-started\u002Fdeployment#static-hosting","静态托管","，那么默认情况下，Nuxt 会将每个页面渲染为单独的静态 HTML 文件。",[1652,1653,1654],"warning",{},[1024,1655,1638,1656,1641,1658,1660,1661,1464],{},[1127,1657,697],{},[1127,1659,1644],{}," 命令预渲染你的应用，那么你将无法使用任何服务端端点，因为输出文件夹中不会包含服务器。如果你需要服务端功能，请改用 ",[1127,1662,677],{},[1024,1664,1665,1666,1669,1670,1673,1674,1677],{},"如果你使用的是纯客户端渲染，那么这可能并不必要。你可能只需要一个 ",[1127,1667,1668],{},"index.html"," 文件，外加 ",[1127,1671,1672],{},"200.html"," 和 ",[1127,1675,1676],{},"404.html"," 两个回退文件，你可以告诉你的静态 Web 主机为所有请求提供这些文件。",[1024,1679,1680,1681,1683,1684,1688],{},"为了实现这一点，我们可以改变路由的预渲染方式。只需将以下内容添加到 ",[1127,1682,174],{}," 中的",[1028,1685,1687],{"href":1686},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fhooks#nuxt-hooks-build-time","你的钩子","里：",[1120,1690,1693],{"className":1563,"code":1691,"filename":174,"language":1159,"meta":1692,"style":354},"export default defineNuxtConfig({\n  hooks: {\n    'prerender:routes' ({ routes }) {\n      routes.clear() \u002F\u002F 不生成任何路由（默认路由除外）\n    },\n  },\n})\n","twoslash",[1127,1694,1695,1707,1716,1739,1755,1760,1765],{"__ignoreMap":354},[1130,1696,1697,1699,1701,1703,1705],{"class":1132,"line":1133},[1130,1698,1572],{"class":1571},[1130,1700,1575],{"class":1571},[1130,1702,1578],{"class":1182},[1130,1704,1187],{"class":1186},[1130,1706,1583],{"class":1136},[1130,1708,1709,1712,1714],{"class":1132,"line":1167},[1130,1710,1711],{"class":1588},"  hooks",[1130,1713,1592],{"class":1136},[1130,1715,1225],{"class":1136},[1130,1717,1718,1721,1724,1727,1730,1734,1737],{"class":1132,"line":1201},[1130,1719,1720],{"class":1154},"    '",[1130,1722,1723],{"class":1158},"prerender:routes",[1130,1725,1726],{"class":1154},"'",[1130,1728,1729],{"class":1136}," ({",[1130,1731,1733],{"class":1732},"ssIVr"," routes",[1130,1735,1736],{"class":1136}," })",[1130,1738,1225],{"class":1136},[1130,1740,1741,1744,1746,1749,1752],{"class":1132,"line":1208},[1130,1742,1743],{"class":1186},"      routes",[1130,1745,1234],{"class":1136},[1130,1747,1748],{"class":1182},"clear",[1130,1750,1751],{"class":1588},"() ",[1130,1753,1754],{"class":1197},"\u002F\u002F 不生成任何路由（默认路由除外）\n",[1130,1756,1757],{"class":1132,"line":1228},[1130,1758,1759],{"class":1136},"    },\n",[1130,1761,1762],{"class":1132,"line":1246},[1130,1763,1764],{"class":1136},"  },\n",[1130,1766,1767,1769],{"class":1132,"line":1252},[1130,1768,1604],{"class":1136},[1130,1770,1607],{"class":1186},[1024,1772,1773],{},"这将产生三个文件：",[1420,1775,1776,1780,1784],{},[1423,1777,1778],{},[1127,1779,1668],{},[1423,1781,1782],{},[1127,1783,1672],{},[1423,1785,1786],{},[1127,1787,1676],{},[1789,1790,1792],"h4",{"id":1791},"什么是-200html-和-404html","什么是 200.html 和 404.html？",[1024,1794,1795],{},"静态主机需要为客户端路由和缺失路径提供一个 HTML 外壳。Nuxt 为此发出两个 SPA 回退文件：",[1420,1797,1798,1805],{},[1423,1799,1800,1804],{},[1052,1801,1802],{},[1127,1803,1672],{},"：当你希望客户端路由处理该 URL 时，为不匹配的路径提供此文件。",[1423,1806,1807,1811],{},[1052,1808,1809],{},[1127,1810,1676],{},"：当主机应保持 404 状态码并仍然加载你的应用时，提供此文件。",[1024,1813,1814,1673,1816,1818,1819,1822,1823,1825],{},[1127,1815,697],{},[1127,1817,1644],{}," 会将这些文件写入 ",[1127,1820,1821],{},".output\u002Fpublic\u002F","。不带预渲染的纯 ",[1127,1824,677],{}," 不会写入。如果使用混合路由规则，请通过路由规则添加回退文件，或者在需要它们时运行预渲染构建。将你的主机指向你的服务商所期望的文件。",[1789,1827,1828],{"id":1828},"跳过客户端回退文件的生成",[1024,1830,1831,1832,1834,1835,1673,1837,1839,1840,1843,1844,1847],{},"当预渲染一个客户端渲染的应用时，Nuxt 默认会生成 ",[1127,1833,1668],{},"、",[1127,1836,1672],{},[1127,1838,1676],{}," 文件。然而，如果你需要阻止构建中生成任何（或全部）这些文件，可以使用来自 ",[1028,1841,749],{"href":1842},"\u002Fdocs\u002Fgetting-started\u002Fprerendering#prerendergenerate-nitro-hook"," 的 ",[1127,1845,1846],{},"'prerender:generate'"," 钩子。",[1120,1849,1851],{"className":1563,"code":1850,"filename":174,"language":1159,"meta":1692,"style":354},"\u002F\u002F @errors: 2353 7006\nexport default defineNuxtConfig({\n  ssr: false,\n  nitro: {\n    hooks: {\n      'prerender:generate' (route) {\n        const routesToSkip = ['\u002Findex.html', '\u002F200.html', '\u002F404.html']\n        if (routesToSkip.includes(route.route)) {\n          route.skip = true\n        }\n      },\n    },\n  },\n})\n",[1127,1852,1853,1858,1870,1880,1889,1898,1919,1962,1990,2005,2010,2015,2019,2023],{"__ignoreMap":354},[1130,1854,1855],{"class":1132,"line":1133},[1130,1856,1857],{"class":1197},"\u002F\u002F @errors: 2353 7006\n",[1130,1859,1860,1862,1864,1866,1868],{"class":1132,"line":1167},[1130,1861,1572],{"class":1571},[1130,1863,1575],{"class":1571},[1130,1865,1578],{"class":1182},[1130,1867,1187],{"class":1186},[1130,1869,1583],{"class":1136},[1130,1871,1872,1874,1876,1878],{"class":1132,"line":1201},[1130,1873,1589],{"class":1588},[1130,1875,1592],{"class":1136},[1130,1877,1596],{"class":1595},[1130,1879,1599],{"class":1136},[1130,1881,1882,1885,1887],{"class":1132,"line":1208},[1130,1883,1884],{"class":1588},"  nitro",[1130,1886,1592],{"class":1136},[1130,1888,1225],{"class":1136},[1130,1890,1891,1894,1896],{"class":1132,"line":1228},[1130,1892,1893],{"class":1588},"    hooks",[1130,1895,1592],{"class":1136},[1130,1897,1225],{"class":1136},[1130,1899,1900,1903,1906,1908,1911,1914,1917],{"class":1132,"line":1246},[1130,1901,1902],{"class":1154},"      '",[1130,1904,1905],{"class":1158},"prerender:generate",[1130,1907,1726],{"class":1154},[1130,1909,1910],{"class":1136}," (",[1130,1912,1913],{"class":1732},"route",[1130,1915,1916],{"class":1136},")",[1130,1918,1225],{"class":1136},[1130,1920,1921,1924,1927,1929,1932,1934,1937,1939,1942,1945,1948,1950,1952,1954,1957,1959],{"class":1132,"line":1252},[1130,1922,1923],{"class":1170},"        const",[1130,1925,1926],{"class":1174}," routesToSkip",[1130,1928,1179],{"class":1178},[1130,1930,1931],{"class":1588}," [",[1130,1933,1726],{"class":1154},[1130,1935,1936],{"class":1158},"\u002Findex.html",[1130,1938,1726],{"class":1154},[1130,1940,1941],{"class":1136},",",[1130,1943,1944],{"class":1154}," '",[1130,1946,1947],{"class":1158},"\u002F200.html",[1130,1949,1726],{"class":1154},[1130,1951,1941],{"class":1136},[1130,1953,1944],{"class":1154},[1130,1955,1956],{"class":1158},"\u002F404.html",[1130,1958,1726],{"class":1154},[1130,1960,1961],{"class":1588},"]\n",[1130,1963,1964,1967,1969,1972,1974,1977,1979,1981,1983,1985,1988],{"class":1132,"line":1262},[1130,1965,1966],{"class":1571},"        if",[1130,1968,1910],{"class":1588},[1130,1970,1971],{"class":1186},"routesToSkip",[1130,1973,1234],{"class":1136},[1130,1975,1976],{"class":1182},"includes",[1130,1978,1187],{"class":1588},[1130,1980,1913],{"class":1186},[1130,1982,1234],{"class":1136},[1130,1984,1913],{"class":1186},[1130,1986,1987],{"class":1588},")) ",[1130,1989,1583],{"class":1136},[1130,1991,1992,1995,1997,2000,2002],{"class":1132,"line":1267},[1130,1993,1994],{"class":1186},"          route",[1130,1996,1234],{"class":1136},[1130,1998,1999],{"class":1186},"skip",[1130,2001,1179],{"class":1178},[1130,2003,2004],{"class":1595}," true\n",[1130,2006,2007],{"class":1132,"line":1277},[1130,2008,2009],{"class":1136},"        }\n",[1130,2011,2012],{"class":1132,"line":1288},[1130,2013,2014],{"class":1136},"      },\n",[1130,2016,2017],{"class":1132,"line":1308},[1130,2018,1759],{"class":1136},[1130,2020,2021],{"class":1132,"line":1330},[1130,2022,1764],{"class":1136},[1130,2024,2025,2027],{"class":1132,"line":1336},[1130,2026,1604],{"class":1136},[1130,2028,1607],{"class":1186},[1076,2030,2032],{"id":2031},"混合渲染hybrid-rendering","混合渲染（Hybrid Rendering）",[1024,2034,2035],{},"混合渲染允许通过**路由规则（Route Rules）**为每条路由设置不同的缓存规则，并决定服务端应如何响应某个给定 URL 上的新请求。",[1024,2037,2038],{},"过去，Nuxt 应用和服务的每个路由\u002F页面都必须使用相同的渲染模式，要么通用渲染，要么客户端渲染。在各种情况下，某些页面可以在构建时生成，而其他页面则应该进行客户端渲染。例如，想象一个带有管理后台的内容网站。每个内容页面应主要是静态的、且只生成一次，但管理后台需要注册，表现得更像是一个动态应用。",[1024,2040,2041],{},"Nuxt 包含了路由规则和混合渲染支持。使用路由规则，你可以为一组 Nuxt 路由定义规则，更改渲染模式，或基于路由分配缓存策略！",[1024,2043,2044,2045,2050],{},"Nuxt 服务会自动注册相应的中间件，并使用 ",[1028,2046,2049],{"href":2047,"rel":2048},"https:\u002F\u002Fnitro.build\u002Fguide\u002Fcache",[1411],"Nitro 缓存层","将路由包裹在缓存处理器中。",[1120,2052,2054],{"className":1563,"code":2053,"filename":174,"language":1159,"meta":1692,"style":354},"export default defineNuxtConfig({\n  routeRules: {\n    \u002F\u002F 首页在构建时预渲染\n    '\u002F': { prerender: true },\n    \u002F\u002F 产品页按需生成，后台重新验证，在 API 响应变化前缓存\n    '\u002Fproducts': { swr: true },\n    \u002F\u002F 产品页按需生成，后台重新验证，缓存 1 小时（3600 秒）\n    '\u002Fproducts\u002F**': { swr: 3600 },\n    \u002F\u002F 博客页按需生成，后台重新验证，在 CDN 上缓存 1 小时（3600 秒）\n    '\u002Fblog': { isr: 3600 },\n    \u002F\u002F 博客文章页按需生成一次直到下次部署，缓存于 CDN\n    '\u002Fblog\u002F**': { isr: true },\n    \u002F\u002F 管理后台仅客户端渲染\n    '\u002Fadmin\u002F**': { ssr: false },\n    \u002F\u002F 为 API 路由添加 cors 头\n    '\u002Fapi\u002F**': { cors: true },\n    \u002F\u002F 重定向旧 url\n    '\u002Fold-page': { redirect: '\u002Fnew-page' },\n  },\n})\n",[1127,2055,2056,2068,2077,2082,2108,2113,2135,2140,2162,2167,2189,2194,2215,2220,2242,2247,2269,2275,2303,2308],{"__ignoreMap":354},[1130,2057,2058,2060,2062,2064,2066],{"class":1132,"line":1133},[1130,2059,1572],{"class":1571},[1130,2061,1575],{"class":1571},[1130,2063,1578],{"class":1182},[1130,2065,1187],{"class":1186},[1130,2067,1583],{"class":1136},[1130,2069,2070,2073,2075],{"class":1132,"line":1167},[1130,2071,2072],{"class":1588},"  routeRules",[1130,2074,1592],{"class":1136},[1130,2076,1225],{"class":1136},[1130,2078,2079],{"class":1132,"line":1201},[1130,2080,2081],{"class":1197},"    \u002F\u002F 首页在构建时预渲染\n",[1130,2083,2084,2086,2090,2092,2094,2097,2100,2102,2105],{"class":1132,"line":1208},[1130,2085,1720],{"class":1154},[1130,2087,2089],{"class":2088},"sSD0A","\u002F",[1130,2091,1726],{"class":1154},[1130,2093,1592],{"class":1136},[1130,2095,2096],{"class":1136}," {",[1130,2098,2099],{"class":1588}," prerender",[1130,2101,1592],{"class":1136},[1130,2103,2104],{"class":1595}," true",[1130,2106,2107],{"class":1136}," },\n",[1130,2109,2110],{"class":1132,"line":1228},[1130,2111,2112],{"class":1197},"    \u002F\u002F 产品页按需生成，后台重新验证，在 API 响应变化前缓存\n",[1130,2114,2115,2117,2120,2122,2124,2126,2129,2131,2133],{"class":1132,"line":1246},[1130,2116,1720],{"class":1154},[1130,2118,2119],{"class":2088},"\u002Fproducts",[1130,2121,1726],{"class":1154},[1130,2123,1592],{"class":1136},[1130,2125,2096],{"class":1136},[1130,2127,2128],{"class":1588}," swr",[1130,2130,1592],{"class":1136},[1130,2132,2104],{"class":1595},[1130,2134,2107],{"class":1136},[1130,2136,2137],{"class":1132,"line":1252},[1130,2138,2139],{"class":1197},"    \u002F\u002F 产品页按需生成，后台重新验证，缓存 1 小时（3600 秒）\n",[1130,2141,2142,2144,2147,2149,2151,2153,2155,2157,2160],{"class":1132,"line":1262},[1130,2143,1720],{"class":1154},[1130,2145,2146],{"class":2088},"\u002Fproducts\u002F**",[1130,2148,1726],{"class":1154},[1130,2150,1592],{"class":1136},[1130,2152,2096],{"class":1136},[1130,2154,2128],{"class":1588},[1130,2156,1592],{"class":1136},[1130,2158,2159],{"class":1190}," 3600",[1130,2161,2107],{"class":1136},[1130,2163,2164],{"class":1132,"line":1267},[1130,2165,2166],{"class":1197},"    \u002F\u002F 博客页按需生成，后台重新验证，在 CDN 上缓存 1 小时（3600 秒）\n",[1130,2168,2169,2171,2174,2176,2178,2180,2183,2185,2187],{"class":1132,"line":1277},[1130,2170,1720],{"class":1154},[1130,2172,2173],{"class":2088},"\u002Fblog",[1130,2175,1726],{"class":1154},[1130,2177,1592],{"class":1136},[1130,2179,2096],{"class":1136},[1130,2181,2182],{"class":1588}," isr",[1130,2184,1592],{"class":1136},[1130,2186,2159],{"class":1190},[1130,2188,2107],{"class":1136},[1130,2190,2191],{"class":1132,"line":1288},[1130,2192,2193],{"class":1197},"    \u002F\u002F 博客文章页按需生成一次直到下次部署，缓存于 CDN\n",[1130,2195,2196,2198,2201,2203,2205,2207,2209,2211,2213],{"class":1132,"line":1308},[1130,2197,1720],{"class":1154},[1130,2199,2200],{"class":2088},"\u002Fblog\u002F**",[1130,2202,1726],{"class":1154},[1130,2204,1592],{"class":1136},[1130,2206,2096],{"class":1136},[1130,2208,2182],{"class":1588},[1130,2210,1592],{"class":1136},[1130,2212,2104],{"class":1595},[1130,2214,2107],{"class":1136},[1130,2216,2217],{"class":1132,"line":1330},[1130,2218,2219],{"class":1197},"    \u002F\u002F 管理后台仅客户端渲染\n",[1130,2221,2222,2224,2227,2229,2231,2233,2236,2238,2240],{"class":1132,"line":1336},[1130,2223,1720],{"class":1154},[1130,2225,2226],{"class":2088},"\u002Fadmin\u002F**",[1130,2228,1726],{"class":1154},[1130,2230,1592],{"class":1136},[1130,2232,2096],{"class":1136},[1130,2234,2235],{"class":1588}," ssr",[1130,2237,1592],{"class":1136},[1130,2239,1596],{"class":1595},[1130,2241,2107],{"class":1136},[1130,2243,2244],{"class":1132,"line":1346},[1130,2245,2246],{"class":1197},"    \u002F\u002F 为 API 路由添加 cors 头\n",[1130,2248,2249,2251,2254,2256,2258,2260,2263,2265,2267],{"class":1132,"line":1356},[1130,2250,1720],{"class":1154},[1130,2252,2253],{"class":2088},"\u002Fapi\u002F**",[1130,2255,1726],{"class":1154},[1130,2257,1592],{"class":1136},[1130,2259,2096],{"class":1136},[1130,2261,2262],{"class":1588}," cors",[1130,2264,1592],{"class":1136},[1130,2266,2104],{"class":1595},[1130,2268,2107],{"class":1136},[1130,2270,2272],{"class":1132,"line":2271},17,[1130,2273,2274],{"class":1197},"    \u002F\u002F 重定向旧 url\n",[1130,2276,2278,2280,2283,2285,2287,2289,2292,2294,2296,2299,2301],{"class":1132,"line":2277},18,[1130,2279,1720],{"class":1154},[1130,2281,2282],{"class":2088},"\u002Fold-page",[1130,2284,1726],{"class":1154},[1130,2286,1592],{"class":1136},[1130,2288,2096],{"class":1136},[1130,2290,2291],{"class":1588}," redirect",[1130,2293,1592],{"class":1136},[1130,2295,1944],{"class":1154},[1130,2297,2298],{"class":1158},"\u002Fnew-page",[1130,2300,1726],{"class":1154},[1130,2302,2107],{"class":1136},[1130,2304,2306],{"class":1132,"line":2305},19,[1130,2307,1764],{"class":1136},[1130,2309,2311,2313],{"class":1132,"line":2310},20,[1130,2312,1604],{"class":1136},[1130,2314,1607],{"class":1186},[1633,2316,2317],{"id":2317},"路由规则",[1024,2319,2320],{},"你可以使用的不同属性如下：",[1420,2322,2323,2337,2353,2373,2385,2411,2430,2442,2454],{},[1423,2324,2325,2336],{},[1127,2326,2327,2331,2333],{"className":1563,"language":1159,"style":354},[1130,2328,2330],{"class":2329},"sJK67","redirect",[1130,2332,1592],{"class":1136},[1130,2334,2335],{"class":1186}," string"," - 定义服务端重定向。",[1423,2338,2339,2349,2350,2352],{},[1127,2340,2341,2344,2346],{"className":1563,"language":1159,"style":354},[1130,2342,2343],{"class":2329},"ssr",[1130,2345,1592],{"class":1136},[1130,2347,2348],{"class":1186}," boolean"," - 用 ",[1127,2351,1616],{}," 禁用应用某些部分的 HTML 服务端渲染，使它们只在浏览器中渲染",[1423,2354,2355,2364,2365,2368,2369,2372],{},[1127,2356,2357,2360,2362],{"className":1563,"language":1159,"style":354},[1130,2358,2359],{"class":2329},"cors",[1130,2361,1592],{"class":1136},[1130,2363,2348],{"class":1186}," - 自动添加 cors 头（用 ",[1127,2366,2367],{},"cors: true","），你可以通过 ",[1127,2370,2371],{},"headers"," 覆盖来自定义输出",[1423,2374,2375,2384],{},[1127,2376,2377,2379,2381],{"className":1563,"language":1159,"style":354},[1130,2378,2371],{"class":2329},[1130,2380,1592],{"class":1136},[1130,2382,2383],{"class":1186}," object"," - 为你网站的某些部分添加特定头——例如你的资源",[1423,2386,2387,2402,2403,2406,2407,2410],{},[1127,2388,2389,2392,2394,2397,2400],{"className":1563,"language":1159,"style":354},[1130,2390,2391],{"class":2329},"swr",[1130,2393,1592],{"class":1136},[1130,2395,2396],{"class":1186}," number ",[1130,2398,2399],{"class":1178},"|",[1130,2401,2348],{"class":1186}," - 为服务端响应添加缓存头，并在服务端或反向代理上缓存一个可配置的 TTL（存活时间）。Nitro 的 ",[1127,2404,2405],{},"node-server"," 预设能够缓存完整的响应。当 TTL 过期时，会先发送缓存的响应，同时页面会在后台重新生成。如果设为 true，则添加一个不带 MaxAge 的 ",[1127,2408,2409],{},"stale-while-revalidate"," 头。",[1423,2412,2413,2426,2427,2429],{},[1127,2414,2415,2418,2420,2422,2424],{"className":1563,"language":1159,"style":354},[1130,2416,2417],{"class":2329},"isr",[1130,2419,1592],{"class":1136},[1130,2421,2396],{"class":1186},[1130,2423,2399],{"class":1178},[1130,2425,2348],{"class":1186}," - 行为同 ",[1127,2428,2391],{},"，不同之处在于我们能够将响应添加到支持此特性的平台的 CDN 缓存中（目前是 Netlify 或 Vercel）。如果设为 true，内容会持续存在于 CDN 中直到下次部署。",[1423,2431,2432,2441],{},[1127,2433,2434,2437,2439],{"className":1563,"language":1159,"style":354},[1130,2435,2436],{"class":2329},"prerender",[1130,2438,1592],{"class":1136},[1130,2440,2348],{"class":1186}," - 在构建时预渲染路由，并将其作为静态资源包含进你的构建产物中",[1423,2443,2444,2453],{},[1127,2445,2446,2449,2451],{"className":1563,"language":1159,"style":354},[1130,2447,2448],{"class":2329},"noScripts",[1130,2450,1592],{"class":1136},[1130,2452,2348],{"class":1186}," - 为网站某些部分禁用 Nuxt 脚本和 JS 资源提示的渲染。",[1423,2455,2456,2487],{},[1127,2457,2458,2461,2463,2466,2468,2471,2473,2476,2478,2481,2483,2485],{"className":1563,"language":1159,"style":354},[1130,2459,2460],{"class":2329},"appMiddleware",[1130,2462,1592],{"class":1136},[1130,2464,2465],{"class":1186}," string ",[1130,2467,2399],{"class":1178},[1130,2469,2470],{"class":1186}," string[] ",[1130,2472,2399],{"class":1178},[1130,2474,2475],{"class":1186}," Record",[1130,2477,1137],{"class":1178},[1130,2479,2480],{"class":1186},"string",[1130,2482,1941],{"class":1136},[1130,2484,2348],{"class":1186},[1130,2486,1296],{"class":1178}," - 允许你定义哪些中间件应该（或不应该）为你的应用 Vue 部分（即非 Nitro 路由）中页面路径运行",[1609,2489,2490],{},[1024,2491,2492,2493,1641,2495,2497,2498,2501,2502,2506],{},"使用 ",[1127,2494,2417],{},[1127,2496,2391],{}," 的路由还会在 HTML 旁边生成 ",[1127,2499,2500],{},"_payload.json"," 文件。客户端导航加载这些缓存的 payload，而不是重新获取数据。阅读更多关于 ",[1028,2503,2505],{"href":2504},"\u002Fdocs\u002Fgetting-started\u002Fprerendering#payload-extraction","payload 提取"," 的内容。",[1024,2508,2509],{},"只要可能，路由规则会自动应用到部署平台原生的规则上以获得最佳性能（目前支持 Netlify 和 Vercel）。",[1477,2511,2512],{},[1024,2513,2514,2515,2519],{},"请注意，混合渲染在使用 ",[1028,2516,2517],{"href":696},[1127,2518,697],{}," 时不可用。",[1024,2521,2522],{},[1052,2523,2524],{},"示例：",[2526,2527,2528],"card-group",{},[2529,2530,2536],"card",{":ui":2531,"icon":2532,"target":2533,"title":2534,"to":2535},"{\"icon\":{\"base\":\"text-black dark:text-white\"}}","i-simple-icons-github","_blank","Nuxt Vercel ISR","https:\u002F\u002Fgithub.com\u002Fdanielroe\u002Fnuxt-vercel-isr",[1024,2537,2538],{},"一个部署在 Vercel 上、使用了混合渲染的 Nuxt 应用示例。",[1076,2540,2542],{"id":2541},"边缘端渲染edge-side-rendering","边缘端渲染（Edge-Side Rendering）",[1024,2544,2545],{},"边缘端渲染（ESR）是 Nuxt 引入的一项强大功能，它允许通过内容分发网络（CDN）的边缘服务器，在你的用户更近的地方渲染你的 Nuxt 应用。通过利用 ESR，你可以确保提升性能、降低延迟，从而提供更好的用户体验。",[1024,2547,2548],{},"使用 ESR，渲染过程被推到了网络的「边缘」——即 CDN 的边缘服务器。请注意，ESR 更像是一个部署目标，而不是一种真正的渲染模式。",[1024,2550,2551,2552,1464],{},"当发起一个页面的请求时，它不会一路直达源服务器，而是被最近的边缘服务器拦截。该服务器生成页面的 HTML 并将其发回给用户。这个过程最小化了数据必须传输的物理距离，",[1052,2553,2554],{},"减少了延迟并更快地加载页面",[1024,2556,2557,2558,2560,2561,2565],{},"边缘端渲染之所以可能，得益于为 Nuxt 提供动力的",[1028,2559,210],{"href":209}," ",[1028,2562,749],{"href":2563,"rel":2564},"https:\u002F\u002Fnitro.build\u002F",[1411],"。它提供了对 Node.js、Deno、Cloudflare Workers 等的跨平台支持。",[1024,2567,2568],{},"目前可以利用 ESR 的平台有：",[1420,2570,2571,2582,2597],{},[1423,2572,2573,2578,2579,2581],{},[1028,2574,2577],{"href":2575,"rel":2576},"https:\u002F\u002Fpages.cloudflare.com",[1411],"Cloudflare Pages","，使用 git 集成零配置 + ",[1127,2580,677],{}," 命令",[1423,2583,2584,2589,2590,2592,2593,2596],{},[1028,2585,2588],{"href":2586,"rel":2587},"https:\u002F\u002Fvercel.com\u002Fhome",[1411],"Vercel Cloud","，使用 ",[1127,2591,677],{}," 命令和 ",[1127,2594,2595],{},"NITRO_PRESET=vercel-edge"," 环境变量",[1423,2598,2599,2589,2604,2592,2606,2596],{},[1028,2600,2603],{"href":2601,"rel":2602},"https:\u002F\u002Fwww.netlify.com\u002Fplatform\u002F#netlify-edge-functions",[1411],"Netlify Edge Functions",[1127,2605,677],{},[1127,2607,2608],{},"NITRO_PRESET=netlify-edge",[1024,2610,2611,2612,1464],{},"请注意，在使用边缘端渲染配合路由规则时，也可以使用",[1052,2613,1041],{},[2615,2616,2617],"style",{},"html pre.shiki code .sF54B, html code.shiki .sF54B{--shiki-light:#39ADB5;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s6g6u, html code.shiki .s6g6u{--shiki-light:#E53935;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sXjFp, html code.shiki .sXjFp{--shiki-light:#9C3EDA;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .s0jeK, html code.shiki .s0jeK{--shiki-light:#39ADB5;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .s-Aze, html code.shiki .s-Aze{--shiki-light:#91B859;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .sV7Px, html code.shiki .sV7Px{--shiki-light:#9C3EDA;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sJTDI, html code.shiki .sJTDI{--shiki-light:#90A4AE;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sXPRQ, html code.shiki .sXPRQ{--shiki-light:#39ADB5;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .srJn9, html code.shiki .srJn9{--shiki-light:#6182B8;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .smVNa, html code.shiki .smVNa{--shiki-light:#90A4AE;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .sOUxV, html code.shiki .sOUxV{--shiki-light:#F76D47;--shiki-default:#79B8FF;--shiki-dark:#F78C6C}html pre.shiki code .sZqJ9, html code.shiki .sZqJ9{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s5Y2e, html code.shiki .s5Y2e{--shiki-light:#90A4AE;--shiki-default:#B392F0;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szyBz, html code.shiki .szyBz{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sOtFm, html code.shiki .sOtFm{--shiki-light:#E53935;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html pre.shiki code .si1Qm, html code.shiki .si1Qm{--shiki-light:#FF5370;--shiki-default:#79B8FF;--shiki-dark:#FF9CAC}html pre.shiki code .ssIVr, html code.shiki .ssIVr{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#FFAB70;--shiki-default-font-style:inherit;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sSD0A, html code.shiki .sSD0A{--shiki-light:#E53935;--shiki-default:#9ECBFF;--shiki-dark:#F07178}html pre.shiki code .sJK67, html code.shiki .sJK67{--shiki-light:#E2931D;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}",{"title":354,"searchDepth":1201,"depth":1201,"links":2619},[2620,2621,2627,2630],{"id":1078,"depth":1167,"text":1079},{"id":1484,"depth":1167,"text":1485,"children":2622},[2623],{"id":1635,"depth":1201,"text":1635,"children":2624},[2625,2626],{"id":1791,"depth":1208,"text":1792},{"id":1828,"depth":1208,"text":1828},{"id":2031,"depth":1167,"text":2032,"children":2628},[2629],{"id":2317,"depth":1201,"text":2317},{"id":2541,"depth":1167,"text":2542},"md",{},null,{"title":194,"description":195},"docs\u002F3.guide\u002F1.concepts\u002F1.rendering","KusDfk3Fft3qiWLz6pnKWS0So9wWeLULtGsGjamp-8w",1785179847050]