[{"data":1,"prerenderedAt":4382},["ShallowReactive",2],{"article-/topics/nuxt/nuxt-strapi-integration-guide":3,"related-nuxt":1166,"content-query-m88afAatD0":3462},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":17,"featured":18,"readingTime":19,"body":20,"_type":1160,"_id":1161,"_source":1162,"_file":1163,"_stem":1164,"_extension":1165},"/topics/nuxt/nuxt-strapi-integration-guide","nuxt",false,"","Nuxt 与 Strapi CMS 深度集成指南 - 构建现代化全栈应用","详细讲解 Nuxt 3 与 Strapi v4 的集成方案，从架构设计到实战部署。包括数据模型、API 对接、用户认证、图片处理、SEO 优化和生产部署的完整流程。","2025-12-24","HTMLPAGE 团队",[13,14,15,16],"Nuxt 3","Strapi","Headless CMS","全栈开发","/images/topics/nuxt-strapi-integration.jpg",true,20,{"type":21,"children":22,"toc":1110},"root",[23,32,38,45,51,62,117,123,128,267,273,278,331,336,341,351,356,361,370,378,387,395,400,406,417,430,436,445,451,456,465,476,485,494,499,505,510,519,527,536,544,553,561,567,572,580,586,591,625,631,637,646,652,663,668,673,682,688,693,702,711,716,721,732,737,746,751,760,765,770,776,785,790,799,804,809,815,824,829,838,843,849,858,869,880,886,895,904,913,922,927,945,963,973,983,988,993,1054,1059,1064],{"type":24,"tag":25,"props":26,"children":28},"element","h2",{"id":27},"nuxt-与-strapi-cms-深度集成指南",[29],{"type":30,"value":31},"text","Nuxt 与 Strapi CMS 深度集成指南",{"type":24,"tag":25,"props":33,"children":35},{"id":34},"为什么选择-nuxt-strapi-组合",[36],{"type":30,"value":37},"为什么选择 Nuxt + Strapi 组合",{"type":24,"tag":39,"props":40,"children":42},"h3",{"id":41},"headless-cms-的价值",[43],{"type":30,"value":44},"Headless CMS 的价值",{"type":24,"tag":46,"props":47,"children":48},"p",{},[49],{"type":30,"value":50},"在传统的 CMS 架构中（如 WordPress），前端展示和后端内容管理紧密耦合。这种架构在内容分发渠道单一的时代运作良好，但在今天多渠道、多终端的环境下显得力不从心。",{"type":24,"tag":46,"props":52,"children":53},{},[54,60],{"type":24,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":30,"value":59},"Headless CMS 解决的问题",{"type":30,"value":61},"：",{"type":24,"tag":63,"props":64,"children":65},"ol",{},[66,77,87,97,107],{"type":24,"tag":67,"props":68,"children":69},"li",{},[70,75],{"type":24,"tag":55,"props":71,"children":72},{},[73],{"type":30,"value":74},"多渠道内容分发",{"type":30,"value":76},"：同一套内容可以同时服务于网站、APP、小程序、电子屏幕等不同终端",{"type":24,"tag":67,"props":78,"children":79},{},[80,85],{"type":24,"tag":55,"props":81,"children":82},{},[83],{"type":30,"value":84},"技术栈自由",{"type":30,"value":86},"：前端可以使用任何技术，不受 CMS 限制",{"type":24,"tag":67,"props":88,"children":89},{},[90,95],{"type":24,"tag":55,"props":91,"children":92},{},[93],{"type":30,"value":94},"更好的性能",{"type":30,"value":96},"：API 驱动的架构天然适合缓存和 CDN 加速",{"type":24,"tag":67,"props":98,"children":99},{},[100,105],{"type":24,"tag":55,"props":101,"children":102},{},[103],{"type":30,"value":104},"开发体验",{"type":30,"value":106},"：前后端可以独立开发、独立部署",{"type":24,"tag":67,"props":108,"children":109},{},[110,115],{"type":24,"tag":55,"props":111,"children":112},{},[113],{"type":30,"value":114},"安全性",{"type":30,"value":116},"：内容管理后台与公开网站分离，减少攻击面",{"type":24,"tag":39,"props":118,"children":120},{"id":119},"为什么是-strapi",[121],{"type":30,"value":122},"为什么是 Strapi",{"type":24,"tag":46,"props":124,"children":125},{},[126],{"type":30,"value":127},"在众多 Headless CMS 中，Strapi 具有独特优势：",{"type":24,"tag":129,"props":130,"children":131},"table",{},[132,155],{"type":24,"tag":133,"props":134,"children":135},"thead",{},[136],{"type":24,"tag":137,"props":138,"children":139},"tr",{},[140,146,150],{"type":24,"tag":141,"props":142,"children":143},"th",{},[144],{"type":30,"value":145},"特性",{"type":24,"tag":141,"props":147,"children":148},{},[149],{"type":30,"value":14},{"type":24,"tag":141,"props":151,"children":152},{},[153],{"type":30,"value":154},"其他方案",{"type":24,"tag":156,"props":157,"children":158},"tbody",{},[159,178,196,214,232,250],{"type":24,"tag":137,"props":160,"children":161},{},[162,168,173],{"type":24,"tag":163,"props":164,"children":165},"td",{},[166],{"type":30,"value":167},"开源 & 免费",{"type":24,"tag":163,"props":169,"children":170},{},[171],{"type":30,"value":172},"✅ 完全开源",{"type":24,"tag":163,"props":174,"children":175},{},[176],{"type":30,"value":177},"部分开源或付费",{"type":24,"tag":137,"props":179,"children":180},{},[181,186,191],{"type":24,"tag":163,"props":182,"children":183},{},[184],{"type":30,"value":185},"自托管",{"type":24,"tag":163,"props":187,"children":188},{},[189],{"type":30,"value":190},"✅ 数据掌控在自己手中",{"type":24,"tag":163,"props":192,"children":193},{},[194],{"type":30,"value":195},"多数是 SaaS",{"type":24,"tag":137,"props":197,"children":198},{},[199,204,209],{"type":24,"tag":163,"props":200,"children":201},{},[202],{"type":30,"value":203},"定制性",{"type":24,"tag":163,"props":205,"children":206},{},[207],{"type":30,"value":208},"✅ 可深度定制",{"type":24,"tag":163,"props":210,"children":211},{},[212],{"type":30,"value":213},"通常受限",{"type":24,"tag":137,"props":215,"children":216},{},[217,222,227],{"type":24,"tag":163,"props":218,"children":219},{},[220],{"type":30,"value":221},"技术栈",{"type":24,"tag":163,"props":223,"children":224},{},[225],{"type":30,"value":226},"Node.js，前端开发者友好",{"type":24,"tag":163,"props":228,"children":229},{},[230],{"type":30,"value":231},"各异",{"type":24,"tag":137,"props":233,"children":234},{},[235,240,245],{"type":24,"tag":163,"props":236,"children":237},{},[238],{"type":30,"value":239},"社区",{"type":24,"tag":163,"props":241,"children":242},{},[243],{"type":30,"value":244},"活跃的开源社区",{"type":24,"tag":163,"props":246,"children":247},{},[248],{"type":30,"value":249},"取决于具体产品",{"type":24,"tag":137,"props":251,"children":252},{},[253,258,263],{"type":24,"tag":163,"props":254,"children":255},{},[256],{"type":30,"value":257},"学习曲线",{"type":24,"tag":163,"props":259,"children":260},{},[261],{"type":30,"value":262},"友好，1-2 天可上手",{"type":24,"tag":163,"props":264,"children":265},{},[266],{"type":30,"value":231},{"type":24,"tag":39,"props":268,"children":270},{"id":269},"为什么是-nuxt",[271],{"type":30,"value":272},"为什么是 Nuxt",{"type":24,"tag":46,"props":274,"children":275},{},[276],{"type":30,"value":277},"Nuxt 作为 Vue.js 的全栈框架，与 Strapi 配合有天然优势：",{"type":24,"tag":63,"props":279,"children":280},{},[281,291,301,311,321],{"type":24,"tag":67,"props":282,"children":283},{},[284,289],{"type":24,"tag":55,"props":285,"children":286},{},[287],{"type":30,"value":288},"服务端渲染",{"type":30,"value":290},"：对 SEO 至关重要",{"type":24,"tag":67,"props":292,"children":293},{},[294,299],{"type":24,"tag":55,"props":295,"children":296},{},[297],{"type":30,"value":298},"自动路由",{"type":30,"value":300},"：基于文件系统，减少配置",{"type":24,"tag":67,"props":302,"children":303},{},[304,309],{"type":24,"tag":55,"props":305,"children":306},{},[307],{"type":30,"value":308},"数据获取",{"type":30,"value":310},"：内置 useFetch/useAsyncData，完美配合 API",{"type":24,"tag":67,"props":312,"children":313},{},[314,319],{"type":24,"tag":55,"props":315,"children":316},{},[317],{"type":30,"value":318},"静态生成",{"type":30,"value":320},"：可以预渲染页面，极致性能",{"type":24,"tag":67,"props":322,"children":323},{},[324,329],{"type":24,"tag":55,"props":325,"children":326},{},[327],{"type":30,"value":328},"Vue 生态",{"type":30,"value":330},"：丰富的组件库和工具",{"type":24,"tag":25,"props":332,"children":334},{"id":333},"架构设计",[335],{"type":30,"value":333},{"type":24,"tag":39,"props":337,"children":339},{"id":338},"整体架构图",[340],{"type":30,"value":338},{"type":24,"tag":342,"props":343,"children":345},"pre",{"code":344},"┌─────────────────────────────────────────────────────────────┐\n│ 用户 │\n└─────────────────────────────────────────────────────────────┘\n │\n ▼\n┌─────────────────────────────────────────────────────────────┐\n│ CDN / Edge Network │\n│ (Cloudflare / Vercel) │\n└─────────────────────────────────────────────────────────────┘\n │\n ┌───────────────┴───────────────┐\n ▼ ▼\n┌─────────────────────────┐ ┌─────────────────────────┐\n│ Nuxt 3 Frontend │ │ Strapi Backend │\n│ ───────────────────── │ │ ───────────────────── │\n│ • SSR / SSG │────▶│ • Content API │\n│ • SEO 优化 │ │ • Media Library │\n│ • 用户认证 │ │ • 用户管理 │\n│ • 动态路由 │ │ • 权限控制 │\n└─────────────────────────┘ └─────────────────────────┘\n │\n ▼\n ┌─────────────────────────┐\n │ Database │\n │ (PostgreSQL/MySQL) │\n └─────────────────────────┘\n",[346],{"type":24,"tag":347,"props":348,"children":349},"code",{"__ignoreMap":7},[350],{"type":30,"value":344},{"type":24,"tag":39,"props":352,"children":354},{"id":353},"数据流设计",[355],{"type":30,"value":353},{"type":24,"tag":46,"props":357,"children":358},{},[359],{"type":30,"value":360},"在 Nuxt + Strapi 架构中，数据流如下：",{"type":24,"tag":46,"props":362,"children":363},{},[364,369],{"type":24,"tag":55,"props":365,"children":366},{},[367],{"type":30,"value":368},"内容发布流程",{"type":30,"value":61},{"type":24,"tag":342,"props":371,"children":373},{"code":372},"编辑在 Strapi 创建/更新内容\n │\n ▼\n 保存到数据库\n │\n ▼\n 触发 Webhook（可选）\n │\n ▼\n Nuxt 重新构建/清除缓存\n │\n ▼\n 用户访问看到新内容\n",[374],{"type":24,"tag":347,"props":375,"children":376},{"__ignoreMap":7},[377],{"type":30,"value":372},{"type":24,"tag":46,"props":379,"children":380},{},[381,386],{"type":24,"tag":55,"props":382,"children":383},{},[384],{"type":30,"value":385},"用户请求流程",{"type":30,"value":61},{"type":24,"tag":342,"props":388,"children":390},{"code":389},"用户访问页面\n │\n ▼\nNuxt 服务端收到请求\n │\n ▼\n调用 Strapi API 获取数据\n │\n ▼\n渲染 HTML 返回给用户\n │\n ▼\n客户端水合，页面可交互\n",[391],{"type":24,"tag":347,"props":392,"children":393},{"__ignoreMap":7},[394],{"type":30,"value":389},{"type":24,"tag":25,"props":396,"children":398},{"id":397},"环境搭建",[399],{"type":30,"value":397},{"type":24,"tag":39,"props":401,"children":403},{"id":402},"步骤一创建-strapi-项目",[404],{"type":30,"value":405},"步骤一：创建 Strapi 项目",{"type":24,"tag":342,"props":407,"children":412},{"code":408,"language":409,"meta":7,"className":410},"# 创建 Strapi 项目\nnpx create-strapi-app@latest my-cms --quickstart\n\n# 或者指定数据库\nnpx create-strapi-app@latest my-cms --dbclient=postgres\n","bash",[411],"language-bash",[413],{"type":24,"tag":347,"props":414,"children":415},{"__ignoreMap":7},[416],{"type":30,"value":408},{"type":24,"tag":46,"props":418,"children":419},{},[420,422,428],{"type":30,"value":421},"安装完成后，访问 ",{"type":24,"tag":347,"props":423,"children":425},{"className":424},[],[426],{"type":30,"value":427},"http://localhost:1337/admin",{"type":30,"value":429}," 创建管理员账号。",{"type":24,"tag":39,"props":431,"children":433},{"id":432},"步骤二创建-nuxt-项目",[434],{"type":30,"value":435},"步骤二：创建 Nuxt 项目",{"type":24,"tag":342,"props":437,"children":440},{"code":438,"language":409,"meta":7,"className":439},"# 创建 Nuxt 3 项目\nnpx nuxi@latest init my-frontend\n\ncd my-frontend\nnpm install\n",[411],[441],{"type":24,"tag":347,"props":442,"children":443},{"__ignoreMap":7},[444],{"type":30,"value":438},{"type":24,"tag":39,"props":446,"children":448},{"id":447},"步骤三配置环境变量",[449],{"type":30,"value":450},"步骤三：配置环境变量",{"type":24,"tag":46,"props":452,"children":453},{},[454],{"type":30,"value":455},"在两个项目中分别配置环境变量：",{"type":24,"tag":46,"props":457,"children":458},{},[459,464],{"type":24,"tag":55,"props":460,"children":461},{},[462],{"type":30,"value":463},"Strapi (.env)",{"type":30,"value":61},{"type":24,"tag":342,"props":466,"children":471},{"code":467,"language":468,"meta":7,"className":469},"# 服务器配置\nHOST=0.0.0.0\nPORT=1337\n\n# 数据库配置\nDATABASE_CLIENT=postgres\nDATABASE_HOST=localhost\nDATABASE_PORT=5432\nDATABASE_NAME=strapi\nDATABASE_USERNAME=strapi\nDATABASE_PASSWORD=your_password\n\n# JWT 密钥\nJWT_SECRET=your-jwt-secret\nADMIN_JWT_SECRET=your-admin-jwt-secret\nAPP_KEYS=key1,key2,key3,key4\n\n# 上传配置\nUPLOAD_PROVIDER=local\n","env",[470],"language-env",[472],{"type":24,"tag":347,"props":473,"children":474},{"__ignoreMap":7},[475],{"type":30,"value":467},{"type":24,"tag":46,"props":477,"children":478},{},[479,484],{"type":24,"tag":55,"props":480,"children":481},{},[482],{"type":30,"value":483},"Nuxt (.env)",{"type":30,"value":61},{"type":24,"tag":342,"props":486,"children":489},{"code":487,"language":468,"meta":7,"className":488},"# Strapi API 地址\nNUXT_PUBLIC_STRAPI_URL=http://localhost:1337\nNUXT_STRAPI_TOKEN=your-api-token\n",[470],[490],{"type":24,"tag":347,"props":491,"children":492},{"__ignoreMap":7},[493],{"type":30,"value":487},{"type":24,"tag":25,"props":495,"children":497},{"id":496},"内容建模",[498],{"type":30,"value":496},{"type":24,"tag":39,"props":500,"children":502},{"id":501},"在-strapi-中创建内容类型",[503],{"type":30,"value":504},"在 Strapi 中创建内容类型",{"type":24,"tag":46,"props":506,"children":507},{},[508],{"type":30,"value":509},"假设我们要建立一个博客系统，需要以下内容类型：",{"type":24,"tag":46,"props":511,"children":512},{},[513,518],{"type":24,"tag":55,"props":514,"children":515},{},[516],{"type":30,"value":517},"Article（文章）",{"type":30,"value":61},{"type":24,"tag":342,"props":520,"children":522},{"code":521},"字段名 类型 说明\n─────────────────────────────────────\ntitle 短文本 文章标题\nslug UID URL 友好标识\ncontent 富文本 文章内容\nexcerpt 长文本 摘要\ncover 媒体(单个) 封面图片\nauthor 关系(多对一) 作者\ncategory 关系(多对一) 分类\ntags 关系(多对多) 标签\npublishedAt 日期时间 发布时间\nseo 组件 SEO 信息\n",[523],{"type":24,"tag":347,"props":524,"children":525},{"__ignoreMap":7},[526],{"type":30,"value":521},{"type":24,"tag":46,"props":528,"children":529},{},[530,535],{"type":24,"tag":55,"props":531,"children":532},{},[533],{"type":30,"value":534},"Category（分类）",{"type":30,"value":61},{"type":24,"tag":342,"props":537,"children":539},{"code":538},"字段名 类型 说明\n─────────────────────────────────────\nname 短文本 分类名称\nslug UID URL 友好标识\ndescription 长文本 分类描述\narticles 关系(一对多) 该分类下的文章\n",[540],{"type":24,"tag":347,"props":541,"children":542},{"__ignoreMap":7},[543],{"type":30,"value":538},{"type":24,"tag":46,"props":545,"children":546},{},[547,552],{"type":24,"tag":55,"props":548,"children":549},{},[550],{"type":30,"value":551},"Author（作者）",{"type":30,"value":61},{"type":24,"tag":342,"props":554,"children":556},{"code":555},"字段名 类型 说明\n─────────────────────────────────────\nname 短文本 作者名称\nbio 长文本 个人简介\navatar 媒体(单个) 头像\nemail 邮箱 联系邮箱\narticles 关系(一对多) 该作者的文章\n",[557],{"type":24,"tag":347,"props":558,"children":559},{"__ignoreMap":7},[560],{"type":30,"value":555},{"type":24,"tag":39,"props":562,"children":564},{"id":563},"seo-组件",[565],{"type":30,"value":566},"SEO 组件",{"type":24,"tag":46,"props":568,"children":569},{},[570],{"type":30,"value":571},"创建可复用的 SEO 组件：",{"type":24,"tag":342,"props":573,"children":575},{"code":574},"组件名: shared.seo\n字段名 类型 说明\n─────────────────────────────────────\nmetaTitle 短文本 页面标题\nmetaDescription 长文本 页面描述\nmetaImage 媒体(单个) 分享图片\nkeywords 短文本 关键词\ncanonicalURL 短文本 规范 URL\nnoIndex 布尔 是否禁止索引\n",[576],{"type":24,"tag":347,"props":577,"children":578},{"__ignoreMap":7},[579],{"type":30,"value":574},{"type":24,"tag":39,"props":581,"children":583},{"id":582},"配置-api-权限",[584],{"type":30,"value":585},"配置 API 权限",{"type":24,"tag":46,"props":587,"children":588},{},[589],{"type":30,"value":590},"在 Strapi 管理后台配置公开 API 权限：",{"type":24,"tag":63,"props":592,"children":593},{},[594,599,620],{"type":24,"tag":67,"props":595,"children":596},{},[597],{"type":30,"value":598},"进入 Settings → Roles → Public",{"type":24,"tag":67,"props":600,"children":601},{},[602,604,610,612,618],{"type":30,"value":603},"为 Article、Category、Author 开启 ",{"type":24,"tag":347,"props":605,"children":607},{"className":606},[],[608],{"type":30,"value":609},"find",{"type":30,"value":611}," 和 ",{"type":24,"tag":347,"props":613,"children":615},{"className":614},[],[616],{"type":30,"value":617},"findOne",{"type":30,"value":619}," 权限",{"type":24,"tag":67,"props":621,"children":622},{},[623],{"type":30,"value":624},"保存设置",{"type":24,"tag":25,"props":626,"children":628},{"id":627},"nuxt-端集成",[629],{"type":30,"value":630},"Nuxt 端集成",{"type":24,"tag":39,"props":632,"children":634},{"id":633},"安装-strapi-模块",[635],{"type":30,"value":636},"安装 Strapi 模块",{"type":24,"tag":342,"props":638,"children":641},{"code":639,"language":409,"meta":7,"className":640},"npm install @nuxtjs/strapi\n",[411],[642],{"type":24,"tag":347,"props":643,"children":644},{"__ignoreMap":7},[645],{"type":30,"value":639},{"type":24,"tag":39,"props":647,"children":649},{"id":648},"配置-nuxt",[650],{"type":30,"value":651},"配置 Nuxt",{"type":24,"tag":342,"props":653,"children":658},{"code":654,"language":655,"meta":7,"className":656},"// nuxt.config.ts\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/strapi'],\n \n strapi: {\n url: process.env.NUXT_PUBLIC_STRAPI_URL || 'http://localhost:1337',\n prefix: '/api',\n version: 'v4',\n cookie: {},\n cookieName: 'strapi_jwt'\n },\n\n runtimeConfig: {\n strapi: {\n token: process.env.NUXT_STRAPI_TOKEN\n },\n public: {\n strapiUrl: process.env.NUXT_PUBLIC_STRAPI_URL || 'http://localhost:1337'\n }\n }\n})\n","typescript",[657],"language-typescript",[659],{"type":24,"tag":347,"props":660,"children":661},{"__ignoreMap":7},[662],{"type":30,"value":654},{"type":24,"tag":39,"props":664,"children":666},{"id":665},"创建类型定义",[667],{"type":30,"value":665},{"type":24,"tag":46,"props":669,"children":670},{},[671],{"type":30,"value":672},"为了获得良好的 TypeScript 支持，定义 Strapi 返回的数据类型：",{"type":24,"tag":342,"props":674,"children":677},{"code":675,"language":655,"meta":7,"className":676},"// types/strapi.ts\n\n// Strapi 响应的通用结构\ninterface StrapiResponse\u003CT> {\n data: T\n meta: {\n pagination?: {\n page: number\n pageSize: number\n pageCount: number\n total: number\n }\n }\n}\n\n// 单个实体的结构\ninterface StrapiEntity\u003CT> {\n id: number\n attributes: T & {\n createdAt: string\n updatedAt: string\n publishedAt: string\n }\n}\n\n// 文章类型\ninterface ArticleAttributes {\n title: string\n slug: string\n content: string\n excerpt: string\n cover: {\n data: StrapiEntity\u003C{\n url: string\n width: number\n height: number\n formats: Record\u003Cstring, { url: string; width: number; height: number }>\n }>\n }\n category: {\n data: StrapiEntity\u003CCategoryAttributes>\n }\n author: {\n data: StrapiEntity\u003CAuthorAttributes>\n }\n tags: {\n data: StrapiEntity\u003CTagAttributes>[]\n }\n seo: SEOComponent\n}\n\n// 分类类型\ninterface CategoryAttributes {\n name: string\n slug: string\n description: string\n}\n\n// 作者类型\ninterface AuthorAttributes {\n name: string\n bio: string\n avatar: {\n data: StrapiEntity\u003C{ url: string }>\n }\n}\n\n// SEO 组件类型\ninterface SEOComponent {\n metaTitle: string\n metaDescription: string\n metaImage: {\n data: StrapiEntity\u003C{ url: string }>\n } | null\n keywords: string\n}\n\nexport type Article = StrapiEntity\u003CArticleAttributes>\nexport type Category = StrapiEntity\u003CCategoryAttributes>\nexport type Author = StrapiEntity\u003CAuthorAttributes>\n",[657],[678],{"type":24,"tag":347,"props":679,"children":680},{"__ignoreMap":7},[681],{"type":30,"value":675},{"type":24,"tag":39,"props":683,"children":685},{"id":684},"创建-composables",[686],{"type":30,"value":687},"创建 Composables",{"type":24,"tag":46,"props":689,"children":690},{},[691],{"type":30,"value":692},"封装数据获取逻辑，使其可复用：",{"type":24,"tag":342,"props":694,"children":697},{"code":695,"language":655,"meta":7,"className":696},"// composables/useArticles.ts\nexport const useArticles = () => {\n const config = useRuntimeConfig()\n const strapiUrl = config.public.strapiUrl\n\n // 获取文章列表\n const getArticles = async (options: {\n page?: number\n pageSize?: number\n category?: string\n sort?: string\n } = {}) => {\n const { page = 1, pageSize = 10, category, sort = 'publishedAt:desc' } = options\n\n let filters = ''\n if (category) {\n filters = `&filters[category][slug][$eq]=${category}`\n }\n\n const { data, error } = await useFetch\u003CStrapiResponse\u003CArticle[]>>(\n `${strapiUrl}/api/articles?populate=*&pagination[page]=${page}&pagination[pageSize]=${pageSize}&sort=${sort}${filters}`\n )\n\n return { data, error }\n }\n\n // 获取单篇文章\n const getArticle = async (slug: string) => {\n const { data, error } = await useFetch\u003CStrapiResponse\u003CArticle[]>>(\n `${strapiUrl}/api/articles?filters[slug][$eq]=${slug}&populate=deep`\n )\n\n return { \n data: computed(() => data.value?.data?.[0] || null), \n error \n }\n }\n\n // 获取相关文章\n const getRelatedArticles = async (articleId: number, categoryId: number, limit: number = 3) => {\n const { data, error } = await useFetch\u003CStrapiResponse\u003CArticle[]>>(\n `${strapiUrl}/api/articles?filters[id][$ne]=${articleId}&filters[category][id][$eq]=${categoryId}&pagination[pageSize]=${limit}&populate=cover,category`\n )\n\n return { data, error }\n }\n\n return {\n getArticles,\n getArticle,\n getRelatedArticles\n }\n}\n",[657],[698],{"type":24,"tag":347,"props":699,"children":700},{"__ignoreMap":7},[701],{"type":30,"value":695},{"type":24,"tag":342,"props":703,"children":706},{"code":704,"language":655,"meta":7,"className":705},"// composables/useCategories.ts\nexport const useCategories = () => {\n const config = useRuntimeConfig()\n const strapiUrl = config.public.strapiUrl\n\n const getCategories = async () => {\n const { data, error } = await useFetch\u003CStrapiResponse\u003CCategory[]>>(\n `${strapiUrl}/api/categories?populate=*`\n )\n\n return { data, error }\n }\n\n const getCategory = async (slug: string) => {\n const { data, error } = await useFetch\u003CStrapiResponse\u003CCategory[]>>(\n `${strapiUrl}/api/categories?filters[slug][$eq]=${slug}&populate=articles.cover`\n )\n\n return { \n data: computed(() => data.value?.data?.[0] || null), \n error \n }\n }\n\n return {\n getCategories,\n getCategory\n }\n}\n",[657],[707],{"type":24,"tag":347,"props":708,"children":709},{"__ignoreMap":7},[710],{"type":30,"value":704},{"type":24,"tag":25,"props":712,"children":714},{"id":713},"页面开发",[715],{"type":30,"value":713},{"type":24,"tag":39,"props":717,"children":719},{"id":718},"文章列表页",[720],{"type":30,"value":718},{"type":24,"tag":342,"props":722,"children":727},{"code":723,"language":724,"meta":7,"className":725},"\u003C!-- pages/blog/index.vue -->\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst { getArticles } = useArticles()\nconst { getCategories } = useCategories()\n\n// 分页参数\nconst page = computed(() => Number(route.query.page) || 1)\nconst category = computed(() => route.query.category as string || '')\n\n// 获取数据\nconst { data: articlesData, error: articlesError } = await getArticles({\n page: page.value,\n pageSize: 12,\n category: category.value\n})\n\nconst { data: categoriesData } = await getCategories()\n\n// 解析数据\nconst articles = computed(() => articlesData.value?.data || [])\nconst pagination = computed(() => articlesData.value?.meta.pagination)\nconst categories = computed(() => categoriesData.value?.data || [])\n\n// SEO\nuseSeoMeta({\n title: '博客文章 | 我的网站',\n description: '探索我们的博客，获取最新的技术文章、教程和行业见解。',\n ogTitle: '博客文章 | 我的网站',\n ogDescription: '探索我们的博客，获取最新的技术文章、教程和行业见解。'\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"container mx-auto px-4 py-8\">\n \u003Ch1 class=\"text-4xl font-bold mb-8\">博客文章\u003C/h1>\n\n \u003C!-- 分类筛选 -->\n \u003Cdiv class=\"flex gap-4 mb-8 overflow-x-auto pb-2\">\n \u003CNuxtLink \n to=\"/blog\" \n :class=\"['px-4 py-2 rounded-full', !category ? 'bg-blue-600 text-white' : 'bg-gray-100']\"\n >\n 全部\n \u003C/NuxtLink>\n \u003CNuxtLink \n v-for=\"cat in categories\" \n :key=\"cat.id\"\n :to=\"`/blog?category=${cat.attributes.slug}`\"\n :class=\"['px-4 py-2 rounded-full whitespace-nowrap', \n category === cat.attributes.slug ? 'bg-blue-600 text-white' : 'bg-gray-100']\"\n >\n {{ cat.attributes.name }}\n \u003C/NuxtLink>\n \u003C/div>\n\n \u003C!-- 文章列表 -->\n \u003Cdiv v-if=\"articlesError\" class=\"text-red-500\">\n 加载失败，请稍后重试\n \u003C/div>\n\n \u003Cdiv v-else-if=\"articles.length === 0\" class=\"text-center py-12\">\n 暂无文章\n \u003C/div>\n\n \u003Cdiv v-else class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \u003CArticleCard \n v-for=\"article in articles\" \n :key=\"article.id\" \n :article=\"article\" \n />\n \u003C/div>\n\n \u003C!-- 分页 -->\n \u003CPagination \n v-if=\"pagination && pagination.pageCount > 1\"\n :current=\"pagination.page\"\n :total=\"pagination.pageCount\"\n class=\"mt-12\"\n />\n \u003C/div>\n\u003C/template>\n","vue",[726],"language-vue",[728],{"type":24,"tag":347,"props":729,"children":730},{"__ignoreMap":7},[731],{"type":30,"value":723},{"type":24,"tag":39,"props":733,"children":735},{"id":734},"文章详情页",[736],{"type":30,"value":734},{"type":24,"tag":342,"props":738,"children":741},{"code":739,"language":724,"meta":7,"className":740},"\u003C!-- pages/blog/[slug].vue -->\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst config = useRuntimeConfig()\nconst { getArticle, getRelatedArticles } = useArticles()\n\nconst slug = route.params.slug as string\n\n// 获取文章\nconst { data: article, error } = await getArticle(slug)\n\n// 404 处理\nif (!article.value) {\n throw createError({\n statusCode: 404,\n message: '文章不存在'\n })\n}\n\n// 获取相关文章\nconst categoryId = article.value.attributes.category.data?.id\nconst { data: relatedArticles } = categoryId \n ? await getRelatedArticles(article.value.id, categoryId, 3)\n : { data: ref({ data: [] }) }\n\n// 解析数据\nconst attrs = computed(() => article.value?.attributes)\nconst cover = computed(() => {\n const coverData = attrs.value?.cover?.data?.attributes\n if (!coverData) return null\n return {\n url: coverData.url.startsWith('/') \n ? `${config.public.strapiUrl}${coverData.url}` \n : coverData.url,\n width: coverData.width,\n height: coverData.height\n }\n})\n\n// SEO\nuseSeoMeta({\n title: attrs.value?.seo?.metaTitle || attrs.value?.title,\n description: attrs.value?.seo?.metaDescription || attrs.value?.excerpt,\n ogTitle: attrs.value?.seo?.metaTitle || attrs.value?.title,\n ogDescription: attrs.value?.seo?.metaDescription || attrs.value?.excerpt,\n ogImage: cover.value?.url,\n ogType: 'article',\n articlePublishedTime: attrs.value?.publishedAt,\n articleAuthor: attrs.value?.author?.data?.attributes?.name\n})\n\n// 结构化数据\nuseHead({\n script: [\n {\n type: 'application/ld+json',\n innerHTML: JSON.stringify({\n '@context': 'https://schema.org',\n '@type': 'Article',\n headline: attrs.value?.title,\n description: attrs.value?.excerpt,\n image: cover.value?.url,\n datePublished: attrs.value?.publishedAt,\n author: {\n '@type': 'Person',\n name: attrs.value?.author?.data?.attributes?.name\n }\n })\n }\n ]\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Carticle class=\"container mx-auto px-4 py-8 max-w-4xl\">\n \u003C!-- 文章头部 -->\n \u003Cheader class=\"mb-8\">\n \u003Cdiv class=\"flex items-center gap-4 text-sm text-gray-500 mb-4\">\n \u003CNuxtLink \n v-if=\"attrs?.category?.data\"\n :to=\"`/blog?category=${attrs.category.data.attributes.slug}`\"\n class=\"text-blue-600 hover:underline\"\n >\n {{ attrs.category.data.attributes.name }}\n \u003C/NuxtLink>\n \u003Cspan>•\u003C/span>\n \u003Ctime :datetime=\"attrs?.publishedAt\">\n {{ new Date(attrs?.publishedAt).toLocaleDateString('zh-CN') }}\n \u003C/time>\n \u003C/div>\n\n \u003Ch1 class=\"text-4xl md:text-5xl font-bold mb-6\">\n {{ attrs?.title }}\n \u003C/h1>\n\n \u003Cp v-if=\"attrs?.excerpt\" class=\"text-xl text-gray-600 mb-6\">\n {{ attrs.excerpt }}\n \u003C/p>\n\n \u003C!-- 作者信息 -->\n \u003Cdiv v-if=\"attrs?.author?.data\" class=\"flex items-center gap-4\">\n \u003Cimg \n v-if=\"attrs.author.data.attributes.avatar?.data\"\n :src=\"`${config.public.strapiUrl}${attrs.author.data.attributes.avatar.data.attributes.url}`\"\n :alt=\"attrs.author.data.attributes.name\"\n class=\"w-12 h-12 rounded-full\"\n >\n \u003Cdiv>\n \u003Cp class=\"font-medium\">{{ attrs.author.data.attributes.name }}\u003C/p>\n \u003Cp class=\"text-sm text-gray-500\">{{ attrs.author.data.attributes.bio }}\u003C/p>\n \u003C/div>\n \u003C/div>\n \u003C/header>\n\n \u003C!-- 封面图 -->\n \u003Cfigure v-if=\"cover\" class=\"mb-12\">\n \u003Cimg \n :src=\"cover.url\" \n :alt=\"attrs?.title\"\n :width=\"cover.width\"\n :height=\"cover.height\"\n class=\"w-full rounded-lg\"\n >\n \u003C/figure>\n\n \u003C!-- 文章内容 -->\n \u003Cdiv \n class=\"prose prose-lg max-w-none\"\n v-html=\"attrs?.content\"\n />\n\n \u003C!-- 标签 -->\n \u003Cdiv v-if=\"attrs?.tags?.data?.length\" class=\"mt-12 pt-8 border-t\">\n \u003Cdiv class=\"flex flex-wrap gap-2\">\n \u003Cspan \n v-for=\"tag in attrs.tags.data\" \n :key=\"tag.id\"\n class=\"px-3 py-1 bg-gray-100 rounded-full text-sm\"\n >\n {{ tag.attributes.name }}\n \u003C/span>\n \u003C/div>\n \u003C/div>\n\n \u003C!-- 相关文章 -->\n \u003Csection v-if=\"relatedArticles?.data?.length\" class=\"mt-16\">\n \u003Ch2 class=\"text-2xl font-bold mb-8\">相关文章\u003C/h2>\n \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n \u003CArticleCard \n v-for=\"related in relatedArticles.data\" \n :key=\"related.id\" \n :article=\"related\"\n compact\n />\n \u003C/div>\n \u003C/section>\n \u003C/article>\n\u003C/template>\n",[726],[742],{"type":24,"tag":347,"props":743,"children":744},{"__ignoreMap":7},[745],{"type":30,"value":739},{"type":24,"tag":39,"props":747,"children":749},{"id":748},"文章卡片组件",[750],{"type":30,"value":748},{"type":24,"tag":342,"props":752,"children":755},{"code":753,"language":724,"meta":7,"className":754},"\u003C!-- components/ArticleCard.vue -->\n\u003Cscript setup lang=\"ts\">\ninterface Props {\n article: Article\n compact?: boolean\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n compact: false\n})\n\nconst config = useRuntimeConfig()\nconst attrs = computed(() => props.article.attributes)\n\nconst coverUrl = computed(() => {\n const url = attrs.value.cover?.data?.attributes?.url\n if (!url) return '/images/placeholder.jpg'\n return url.startsWith('/') ? `${config.public.strapiUrl}${url}` : url\n})\n\nconst formattedDate = computed(() => {\n return new Date(attrs.value.publishedAt).toLocaleDateString('zh-CN', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n })\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CNuxtLink \n :to=\"`/blog/${attrs.slug}`\"\n class=\"group block bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow\"\n >\n \u003Cdiv class=\"aspect-video overflow-hidden\">\n \u003Cimg \n :src=\"coverUrl\"\n :alt=\"attrs.title\"\n class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\n loading=\"lazy\"\n >\n \u003C/div>\n \n \u003Cdiv :class=\"['p-4', compact ? 'space-y-2' : 'p-6 space-y-4']\">\n \u003Cdiv class=\"flex items-center gap-2 text-sm text-gray-500\">\n \u003Cspan v-if=\"attrs.category?.data\" class=\"text-blue-600\">\n {{ attrs.category.data.attributes.name }}\n \u003C/span>\n \u003Cspan v-if=\"attrs.category?.data\">•\u003C/span>\n \u003Ctime :datetime=\"attrs.publishedAt\">{{ formattedDate }}\u003C/time>\n \u003C/div>\n\n \u003Ch3 :class=\"['font-bold group-hover:text-blue-600 transition-colors', \n compact ? 'text-lg line-clamp-2' : 'text-xl']\">\n {{ attrs.title }}\n \u003C/h3>\n\n \u003Cp v-if=\"!compact && attrs.excerpt\" class=\"text-gray-600 line-clamp-3\">\n {{ attrs.excerpt }}\n \u003C/p>\n \u003C/div>\n \u003C/NuxtLink>\n\u003C/template>\n",[726],[756],{"type":24,"tag":347,"props":757,"children":758},{"__ignoreMap":7},[759],{"type":30,"value":753},{"type":24,"tag":25,"props":761,"children":763},{"id":762},"图片处理",[764],{"type":30,"value":762},{"type":24,"tag":46,"props":766,"children":767},{},[768],{"type":30,"value":769},"Strapi 的图片需要特殊处理，包括响应式图片和图片优化。",{"type":24,"tag":39,"props":771,"children":773},{"id":772},"创建图片处理-composable",[774],{"type":30,"value":775},"创建图片处理 Composable",{"type":24,"tag":342,"props":777,"children":780},{"code":778,"language":655,"meta":7,"className":779},"// composables/useStrapiMedia.ts\nexport const useStrapiMedia = () => {\n const config = useRuntimeConfig()\n \n // 获取完整图片 URL\n const getMediaUrl = (url: string) => {\n if (!url) return ''\n if (url.startsWith('http')) return url\n return `${config.public.strapiUrl}${url}`\n }\n\n // 获取最佳格式的图片\n const getOptimizedImage = (media: any, size: 'thumbnail' | 'small' | 'medium' | 'large' = 'medium') => {\n if (!media?.data?.attributes) return null\n\n const attrs = media.data.attributes\n const formats = attrs.formats\n\n // 优先使用指定尺寸的格式化版本\n if (formats?.[size]) {\n return {\n url: getMediaUrl(formats[size].url),\n width: formats[size].width,\n height: formats[size].height\n }\n }\n\n // 降级到原图\n return {\n url: getMediaUrl(attrs.url),\n width: attrs.width,\n height: attrs.height\n }\n }\n\n // 生成 srcset\n const generateSrcset = (media: any) => {\n if (!media?.data?.attributes?.formats) return ''\n\n const formats = media.data.attributes.formats\n const sizes = ['thumbnail', 'small', 'medium', 'large']\n \n return sizes\n .filter(size => formats[size])\n .map(size => `${getMediaUrl(formats[size].url)} ${formats[size].width}w`)\n .join(', ')\n }\n\n return {\n getMediaUrl,\n getOptimizedImage,\n generateSrcset\n }\n}\n",[657],[781],{"type":24,"tag":347,"props":782,"children":783},{"__ignoreMap":7},[784],{"type":30,"value":778},{"type":24,"tag":39,"props":786,"children":788},{"id":787},"响应式图片组件",[789],{"type":30,"value":787},{"type":24,"tag":342,"props":791,"children":794},{"code":792,"language":724,"meta":7,"className":793},"\u003C!-- components/StrapiImage.vue -->\n\u003Cscript setup lang=\"ts\">\ninterface Props {\n media: any\n alt: string\n sizes?: string\n class?: string\n loading?: 'lazy' | 'eager'\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n sizes: '100vw',\n loading: 'lazy'\n})\n\nconst { getMediaUrl, generateSrcset, getOptimizedImage } = useStrapiMedia()\n\nconst defaultImage = getOptimizedImage(props.media, 'medium')\nconst srcset = generateSrcset(props.media)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cimg\n v-if=\"defaultImage\"\n :src=\"defaultImage.url\"\n :srcset=\"srcset\"\n :sizes=\"sizes\"\n :alt=\"alt\"\n :width=\"defaultImage.width\"\n :height=\"defaultImage.height\"\n :loading=\"loading\"\n :class=\"class\"\n >\n\u003C/template>\n",[726],[795],{"type":24,"tag":347,"props":796,"children":797},{"__ignoreMap":7},[798],{"type":30,"value":792},{"type":24,"tag":25,"props":800,"children":802},{"id":801},"用户认证",[803],{"type":30,"value":801},{"type":24,"tag":46,"props":805,"children":806},{},[807],{"type":30,"value":808},"如果需要实现用户登录、评论等功能，需要集成 Strapi 的认证系统。",{"type":24,"tag":39,"props":810,"children":812},{"id":811},"认证-composable",[813],{"type":30,"value":814},"认证 Composable",{"type":24,"tag":342,"props":816,"children":819},{"code":817,"language":655,"meta":7,"className":818},"// composables/useAuth.ts\nexport const useAuth = () => {\n const { login: strapiLogin, logout: strapiLogout, user, fetchUser } = useStrapiAuth()\n const token = useStrapiToken()\n\n const isAuthenticated = computed(() => !!token.value)\n\n // 登录\n const login = async (identifier: string, password: string) => {\n try {\n await strapiLogin({ identifier, password })\n return { success: true }\n } catch (error: any) {\n return { \n success: false, \n error: error.data?.error?.message || '登录失败'\n }\n }\n }\n\n // 注册\n const register = async (username: string, email: string, password: string) => {\n const config = useRuntimeConfig()\n \n try {\n const response = await $fetch(`${config.public.strapiUrl}/api/auth/local/register`, {\n method: 'POST',\n body: { username, email, password }\n })\n \n // 自动登录\n if (response.jwt) {\n token.value = response.jwt\n await fetchUser()\n }\n \n return { success: true }\n } catch (error: any) {\n return { \n success: false, \n error: error.data?.error?.message || '注册失败'\n }\n }\n }\n\n // 登出\n const logout = () => {\n strapiLogout()\n navigateTo('/')\n }\n\n return {\n user,\n isAuthenticated,\n login,\n register,\n logout\n }\n}\n",[657],[820],{"type":24,"tag":347,"props":821,"children":822},{"__ignoreMap":7},[823],{"type":30,"value":817},{"type":24,"tag":39,"props":825,"children":827},{"id":826},"登录页面",[828],{"type":30,"value":826},{"type":24,"tag":342,"props":830,"children":833},{"code":831,"language":724,"meta":7,"className":832},"\u003C!-- pages/login.vue -->\n\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n middleware: 'guest' // 已登录用户跳转\n})\n\nconst { login } = useAuth()\n\nconst form = reactive({\n identifier: '',\n password: ''\n})\nconst loading = ref(false)\nconst error = ref('')\n\nconst handleSubmit = async () => {\n loading.value = true\n error.value = ''\n\n const result = await login(form.identifier, form.password)\n \n if (result.success) {\n navigateTo('/dashboard')\n } else {\n error.value = result.error\n }\n\n loading.value = false\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"min-h-screen flex items-center justify-center\">\n \u003Cdiv class=\"bg-white p-8 rounded-lg shadow-lg w-full max-w-md\">\n \u003Ch1 class=\"text-2xl font-bold mb-6\">登录\u003C/h1>\n\n \u003Cdiv v-if=\"error\" class=\"bg-red-50 text-red-600 p-4 rounded mb-6\">\n {{ error }}\n \u003C/div>\n\n \u003Cform @submit.prevent=\"handleSubmit\" class=\"space-y-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium mb-1\">邮箱或用户名\u003C/label>\n \u003Cinput\n v-model=\"form.identifier\"\n type=\"text\"\n required\n class=\"w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500\"\n >\n \u003C/div>\n\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium mb-1\">密码\u003C/label>\n \u003Cinput\n v-model=\"form.password\"\n type=\"password\"\n required\n class=\"w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500\"\n >\n \u003C/div>\n\n \u003Cbutton\n type=\"submit\"\n :disabled=\"loading\"\n class=\"w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50\"\n >\n {{ loading ? '登录中...' : '登录' }}\n \u003C/button>\n \u003C/form>\n\n \u003Cp class=\"mt-6 text-center text-gray-600\">\n 还没有账号？\n \u003CNuxtLink to=\"/register\" class=\"text-blue-600 hover:underline\">注册\u003C/NuxtLink>\n \u003C/p>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",[726],[834],{"type":24,"tag":347,"props":835,"children":836},{"__ignoreMap":7},[837],{"type":30,"value":831},{"type":24,"tag":25,"props":839,"children":841},{"id":840},"生产部署",[842],{"type":30,"value":840},{"type":24,"tag":39,"props":844,"children":846},{"id":845},"strapi-部署",[847],{"type":30,"value":848},"Strapi 部署",{"type":24,"tag":46,"props":850,"children":851},{},[852,857],{"type":24,"tag":55,"props":853,"children":854},{},[855],{"type":30,"value":856},"使用 Docker 部署",{"type":30,"value":61},{"type":24,"tag":342,"props":859,"children":864},{"code":860,"language":861,"meta":7,"className":862},"# Dockerfile\nFROM node:18-alpine\n\nWORKDIR /app\n\nCOPY package*.json ./\nRUN npm ci --only=production\n\nCOPY . .\nRUN npm run build\n\nEXPOSE 1337\n\nCMD [\"npm\", \"start\"]\n","dockerfile",[863],"language-dockerfile",[865],{"type":24,"tag":347,"props":866,"children":867},{"__ignoreMap":7},[868],{"type":30,"value":860},{"type":24,"tag":342,"props":870,"children":875},{"code":871,"language":872,"meta":7,"className":873},"# docker-compose.yml\nversion: '3'\n\nservices:\n strapi:\n build: .\n ports:\n - '1337:1337'\n environment:\n DATABASE_CLIENT: postgres\n DATABASE_HOST: db\n DATABASE_PORT: 5432\n DATABASE_NAME: strapi\n DATABASE_USERNAME: strapi\n DATABASE_PASSWORD: ${DB_PASSWORD}\n depends_on:\n - db\n volumes:\n - ./public/uploads:/app/public/uploads\n\n db:\n image: postgres:14\n environment:\n POSTGRES_DB: strapi\n POSTGRES_USER: strapi\n POSTGRES_PASSWORD: ${DB_PASSWORD}\n volumes:\n - postgres_data:/var/lib/postgresql/data\n\nvolumes:\n postgres_data:\n","yaml",[874],"language-yaml",[876],{"type":24,"tag":347,"props":877,"children":878},{"__ignoreMap":7},[879],{"type":30,"value":871},{"type":24,"tag":39,"props":881,"children":883},{"id":882},"nuxt-部署",[884],{"type":30,"value":885},"Nuxt 部署",{"type":24,"tag":46,"props":887,"children":888},{},[889,894],{"type":24,"tag":55,"props":890,"children":891},{},[892],{"type":30,"value":893},"部署到 Vercel",{"type":30,"value":61},{"type":24,"tag":342,"props":896,"children":899},{"code":897,"language":409,"meta":7,"className":898},"# 安装 Vercel CLI\nnpm i -g vercel\n\n# 部署\nvercel\n",[411],[900],{"type":24,"tag":347,"props":901,"children":902},{"__ignoreMap":7},[903],{"type":30,"value":897},{"type":24,"tag":46,"props":905,"children":906},{},[907,912],{"type":24,"tag":55,"props":908,"children":909},{},[910],{"type":30,"value":911},"nuxt.config.ts 生产配置",{"type":30,"value":61},{"type":24,"tag":342,"props":914,"children":917},{"code":915,"language":655,"meta":7,"className":916},"export default defineNuxtConfig({\n nitro: {\n preset: 'vercel' // 或 'node-server' 用于自托管\n },\n\n // 生产环境 Strapi URL\n runtimeConfig: {\n public: {\n strapiUrl: process.env.NUXT_PUBLIC_STRAPI_URL\n }\n }\n})\n",[657],[918],{"type":24,"tag":347,"props":919,"children":920},{"__ignoreMap":7},[921],{"type":30,"value":915},{"type":24,"tag":25,"props":923,"children":925},{"id":924},"常见问题解答",[926],{"type":30,"value":924},{"type":24,"tag":46,"props":928,"children":929},{},[930,935,937,943],{"type":24,"tag":55,"props":931,"children":932},{},[933],{"type":30,"value":934},"Q: Strapi 图片在 Nuxt 中无法显示？",{"type":30,"value":936},"\nA: 检查 URL 是否完整。Strapi 返回的图片 URL 可能是相对路径，需要拼接 Strapi 服务器地址。使用 ",{"type":24,"tag":347,"props":938,"children":940},{"className":939},[],[941],{"type":30,"value":942},"useStrapiMedia",{"type":30,"value":944}," composable 统一处理。",{"type":24,"tag":46,"props":946,"children":947},{},[948,953,955,961],{"type":24,"tag":55,"props":949,"children":950},{},[951],{"type":30,"value":952},"Q: 如何处理 Strapi 的分页？",{"type":30,"value":954},"\nA: Strapi v4 的分页参数格式为 ",{"type":24,"tag":347,"props":956,"children":958},{"className":957},[],[959],{"type":30,"value":960},"pagination[page]=1&pagination[pageSize]=10",{"type":30,"value":962},"，响应的 meta 中包含分页信息。",{"type":24,"tag":46,"props":964,"children":965},{},[966,971],{"type":24,"tag":55,"props":967,"children":968},{},[969],{"type":30,"value":970},"Q: 如何实现增量静态生成？",{"type":30,"value":972},"\nA: 可以使用 Webhook 配合 Nuxt 的按需重新生成功能。Strapi 内容更新时触发 Webhook，Nuxt 收到后重新生成相关页面。",{"type":24,"tag":46,"props":974,"children":975},{},[976,981],{"type":24,"tag":55,"props":977,"children":978},{},[979],{"type":30,"value":980},"Q: 开发环境和生产环境如何切换？",{"type":30,"value":982},"\nA: 使用环境变量管理不同环境的 Strapi 地址。本地开发使用 localhost，生产使用真实域名。",{"type":24,"tag":25,"props":984,"children":986},{"id":985},"总结",[987],{"type":30,"value":985},{"type":24,"tag":46,"props":989,"children":990},{},[991],{"type":30,"value":992},"Nuxt + Strapi 是构建现代化内容驱动网站的优秀组合。通过本指南，你应该能够：",{"type":24,"tag":63,"props":994,"children":995},{},[996,1006,1016,1026,1036,1045],{"type":24,"tag":67,"props":997,"children":998},{},[999,1004],{"type":24,"tag":55,"props":1000,"children":1001},{},[1002],{"type":30,"value":1003},"理解架构",{"type":30,"value":1005},"：掌握 Headless CMS 的工作原理和优势",{"type":24,"tag":67,"props":1007,"children":1008},{},[1009,1014],{"type":24,"tag":55,"props":1010,"children":1011},{},[1012],{"type":30,"value":1013},"完成集成",{"type":30,"value":1015},"：从零搭建 Nuxt + Strapi 项目",{"type":24,"tag":67,"props":1017,"children":1018},{},[1019,1024],{"type":24,"tag":55,"props":1020,"children":1021},{},[1022],{"type":30,"value":1023},"开发页面",{"type":30,"value":1025},"：创建列表页、详情页等核心功能",{"type":24,"tag":67,"props":1027,"children":1028},{},[1029,1034],{"type":24,"tag":55,"props":1030,"children":1031},{},[1032],{"type":30,"value":1033},"处理图片",{"type":30,"value":1035},"：实现响应式图片和优化",{"type":24,"tag":67,"props":1037,"children":1038},{},[1039,1043],{"type":24,"tag":55,"props":1040,"children":1041},{},[1042],{"type":30,"value":801},{"type":30,"value":1044},"：集成 Strapi 的认证系统",{"type":24,"tag":67,"props":1046,"children":1047},{},[1048,1052],{"type":24,"tag":55,"props":1049,"children":1050},{},[1051],{"type":30,"value":840},{"type":30,"value":1053},"：将应用部署到生产环境",{"type":24,"tag":46,"props":1055,"children":1056},{},[1057],{"type":30,"value":1058},"这套技术栈特别适合内容密集型网站，如博客、企业官网、电商平台等场景。",{"type":24,"tag":25,"props":1060,"children":1062},{"id":1061},"参考资源",[1063],{"type":30,"value":1061},{"type":24,"tag":1065,"props":1066,"children":1067},"ul",{},[1068,1080,1090,1100],{"type":24,"tag":67,"props":1069,"children":1070},{},[1071],{"type":24,"tag":1072,"props":1073,"children":1077},"a",{"href":1074,"rel":1075},"https://docs.strapi.io/",[1076],"nofollow",[1078],{"type":30,"value":1079},"Strapi 官方文档",{"type":24,"tag":67,"props":1081,"children":1082},{},[1083],{"type":24,"tag":1072,"props":1084,"children":1087},{"href":1085,"rel":1086},"https://strapi.nuxtjs.org/",[1076],[1088],{"type":30,"value":1089},"Nuxt Strapi 模块",{"type":24,"tag":67,"props":1091,"children":1092},{},[1093],{"type":24,"tag":1072,"props":1094,"children":1097},{"href":1095,"rel":1096},"https://docs.strapi.io/dev-docs/api/rest",[1076],[1098],{"type":30,"value":1099},"Strapi v4 REST API 文档",{"type":24,"tag":67,"props":1101,"children":1102},{},[1103],{"type":24,"tag":1072,"props":1104,"children":1107},{"href":1105,"rel":1106},"https://nuxt.com/docs/getting-started/deployment",[1076],[1108],{"type":30,"value":1109},"Nuxt 3 部署指南",{"title":7,"searchDepth":1111,"depth":1111,"links":1112},3,[1113,1115,1120,1124,1129,1134,1140,1145,1149,1153,1157,1158,1159],{"id":27,"depth":1114,"text":31},2,{"id":34,"depth":1114,"text":37,"children":1116},[1117,1118,1119],{"id":41,"depth":1111,"text":44},{"id":119,"depth":1111,"text":122},{"id":269,"depth":1111,"text":272},{"id":333,"depth":1114,"text":333,"children":1121},[1122,1123],{"id":338,"depth":1111,"text":338},{"id":353,"depth":1111,"text":353},{"id":397,"depth":1114,"text":397,"children":1125},[1126,1127,1128],{"id":402,"depth":1111,"text":405},{"id":432,"depth":1111,"text":435},{"id":447,"depth":1111,"text":450},{"id":496,"depth":1114,"text":496,"children":1130},[1131,1132,1133],{"id":501,"depth":1111,"text":504},{"id":563,"depth":1111,"text":566},{"id":582,"depth":1111,"text":585},{"id":627,"depth":1114,"text":630,"children":1135},[1136,1137,1138,1139],{"id":633,"depth":1111,"text":636},{"id":648,"depth":1111,"text":651},{"id":665,"depth":1111,"text":665},{"id":684,"depth":1111,"text":687},{"id":713,"depth":1114,"text":713,"children":1141},[1142,1143,1144],{"id":718,"depth":1111,"text":718},{"id":734,"depth":1111,"text":734},{"id":748,"depth":1111,"text":748},{"id":762,"depth":1114,"text":762,"children":1146},[1147,1148],{"id":772,"depth":1111,"text":775},{"id":787,"depth":1111,"text":787},{"id":801,"depth":1114,"text":801,"children":1150},[1151,1152],{"id":811,"depth":1111,"text":814},{"id":826,"depth":1111,"text":826},{"id":840,"depth":1114,"text":840,"children":1154},[1155,1156],{"id":845,"depth":1111,"text":848},{"id":882,"depth":1111,"text":885},{"id":924,"depth":1114,"text":924},{"id":985,"depth":1114,"text":985},{"id":1061,"depth":1114,"text":1061},"markdown","content:topics:nuxt:nuxt-strapi-integration-guide.md","content","topics/nuxt/nuxt-strapi-integration-guide.md","topics/nuxt/nuxt-strapi-integration-guide","md",[1167,2150,2928],{"_path":1168,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1169,"description":1170,"date":1171,"topic":5,"author":11,"tags":1172,"image":1179,"featured":18,"readingTime":1180,"body":1181,"_type":1160,"_id":2147,"_source":1162,"_file":2148,"_stem":2149,"_extension":1165},"/topics/nuxt/nitro-engine-deep-dive","Nitro 引擎深度剖析","讲透 Nuxt/Nitro 的运行时模型、路由与中间件、存储层与缓存、部署适配与性能调优，帮助你把服务端能力当成可控的工程系统。","2026-01-20",[1173,1174,1175,1176,1177,1178],"Nuxt","Nitro","SSR","Serverless","Edge","缓存","/images/topics/nuxt/nitro.jpg",21,{"type":21,"children":1182,"toc":2115},[1183,1188,1200,1205,1263,1268,1273,1277,1283,1288,1311,1316,1334,1337,1343,1348,1371,1376,1379,1401,1412,1430,1441,1454,1460,1483,1486,1492,1497,1528,1533,1546,1549,1555,1566,1579,1584,1602,1607,1620,1623,1629,1634,1652,1658,1677,1683,1688,1693,1722,1725,1731,1736,1754,1759,1777,1783,1796,1802,1815,1821,1834,1839,1852,1855,1861,1867,1880,1886,1899,1905,1918,1921,1927,1932,1955,1960,1973,1976,1982,1987,2045,2050,2068,2071,2075,2087,2092],{"type":24,"tag":25,"props":1184,"children":1186},{"id":1185},"nitro-引擎深度剖析",[1187],{"type":30,"value":1169},{"type":24,"tag":46,"props":1189,"children":1190},{},[1191,1193,1198],{"type":30,"value":1192},"在 Nuxt 3/4 的体系里，Nitro 不是“一个服务器”，而是一套",{"type":24,"tag":55,"props":1194,"children":1195},{},[1196],{"type":30,"value":1197},"可移植的服务端运行时与构建产物规范",{"type":30,"value":1199},"。",{"type":24,"tag":46,"props":1201,"children":1202},{},[1203],{"type":30,"value":1204},"它把你在开发时写的：",{"type":24,"tag":1065,"props":1206,"children":1207},{},[1208,1219,1230,1241,1252],{"type":24,"tag":67,"props":1209,"children":1210},{},[1211,1217],{"type":24,"tag":347,"props":1212,"children":1214},{"className":1213},[],[1215],{"type":30,"value":1216},"server/api/*",{"type":30,"value":1218},"（API 路由）",{"type":24,"tag":67,"props":1220,"children":1221},{},[1222,1228],{"type":24,"tag":347,"props":1223,"children":1225},{"className":1224},[],[1226],{"type":30,"value":1227},"server/routes/*",{"type":30,"value":1229},"（更底层路由）",{"type":24,"tag":67,"props":1231,"children":1232},{},[1233,1239],{"type":24,"tag":347,"props":1234,"children":1236},{"className":1235},[],[1237],{"type":30,"value":1238},"server/middleware/*",{"type":30,"value":1240},"（中间件）",{"type":24,"tag":67,"props":1242,"children":1243},{},[1244,1250],{"type":24,"tag":347,"props":1245,"children":1247},{"className":1246},[],[1248],{"type":30,"value":1249},"server/plugins/*",{"type":30,"value":1251},"（启动插件）",{"type":24,"tag":67,"props":1253,"children":1254},{},[1255,1261],{"type":24,"tag":347,"props":1256,"children":1258},{"className":1257},[],[1259],{"type":30,"value":1260},"storage",{"type":30,"value":1262},"（KV/文件/内存等存储抽象）",{"type":24,"tag":46,"props":1264,"children":1265},{},[1266],{"type":30,"value":1267},"统一编译成一个可以部署到多种环境的产物：Node Server、Serverless、Edge（取决于适配器与能力集）。",{"type":24,"tag":46,"props":1269,"children":1270},{},[1271],{"type":30,"value":1272},"这篇文章按“你要在生产上稳定运行”的视角，拆解 Nitro 的关键构件，并给出性能与可观测性落地建议。",{"type":24,"tag":1274,"props":1275,"children":1276},"hr",{},[],{"type":24,"tag":25,"props":1278,"children":1280},{"id":1279},"_1-nitro-的定位从-nuxt-ssr-到通用服务端运行时",[1281],{"type":30,"value":1282},"1. Nitro 的定位：从 Nuxt SSR 到“通用服务端运行时”",{"type":24,"tag":46,"props":1284,"children":1285},{},[1286],{"type":30,"value":1287},"Nitro 解决两类问题：",{"type":24,"tag":63,"props":1289,"children":1290},{},[1291,1301],{"type":24,"tag":67,"props":1292,"children":1293},{},[1294,1299],{"type":24,"tag":55,"props":1295,"children":1296},{},[1297],{"type":30,"value":1298},"运行时统一",{"type":30,"value":1300},"：开发/生产环境一致的请求处理模型",{"type":24,"tag":67,"props":1302,"children":1303},{},[1304,1309],{"type":24,"tag":55,"props":1305,"children":1306},{},[1307],{"type":30,"value":1308},"部署可移植",{"type":30,"value":1310},"：同一套代码可输出到不同部署目标",{"type":24,"tag":46,"props":1312,"children":1313},{},[1314],{"type":30,"value":1315},"你可以把 Nitro 看作 Nuxt 的“服务端内核”，而 Nuxt 只是围绕它提供：",{"type":24,"tag":1065,"props":1317,"children":1318},{},[1319,1324,1329],{"type":24,"tag":67,"props":1320,"children":1321},{},[1322],{"type":30,"value":1323},"视图渲染（SSR/RSC 相关能力）",{"type":24,"tag":67,"props":1325,"children":1326},{},[1327],{"type":30,"value":1328},"资源构建（Vite/Webpack）",{"type":24,"tag":67,"props":1330,"children":1331},{},[1332],{"type":30,"value":1333},"路由与数据获取的上层抽象",{"type":24,"tag":1274,"props":1335,"children":1336},{},[],{"type":24,"tag":25,"props":1338,"children":1340},{"id":1339},"_2-请求生命周期一次请求在-nitro-里怎么走",[1341],{"type":30,"value":1342},"2. 请求生命周期：一次请求在 Nitro 里怎么走？",{"type":24,"tag":46,"props":1344,"children":1345},{},[1346],{"type":30,"value":1347},"简化后的请求链路：",{"type":24,"tag":63,"props":1349,"children":1350},{},[1351,1356,1361,1366],{"type":24,"tag":67,"props":1352,"children":1353},{},[1354],{"type":30,"value":1355},"入口适配器接收请求（Node/Serverless/Edge）",{"type":24,"tag":67,"props":1357,"children":1358},{},[1359],{"type":30,"value":1360},"进入 Nitro 的 H3 请求处理器（统一事件模型）",{"type":24,"tag":67,"props":1362,"children":1363},{},[1364],{"type":30,"value":1365},"依次执行：中间件 → 路由匹配 → handler",{"type":24,"tag":67,"props":1367,"children":1368},{},[1369],{"type":30,"value":1370},"写回响应（含 headers、缓存策略、流式输出等）",{"type":24,"tag":46,"props":1372,"children":1373},{},[1374],{"type":30,"value":1375},"关键点：Nitro 用统一的事件对象承载请求上下文，这让你在不同部署目标下写出的 server 代码保持一致。",{"type":24,"tag":1274,"props":1377,"children":1378},{},[],{"type":24,"tag":25,"props":1380,"children":1382},{"id":1381},"_3-路由系统serverapi-与-serverroutes-的区别",[1383,1385,1391,1393,1399],{"type":30,"value":1384},"3. 路由系统：",{"type":24,"tag":347,"props":1386,"children":1388},{"className":1387},[],[1389],{"type":30,"value":1390},"server/api",{"type":30,"value":1392}," 与 ",{"type":24,"tag":347,"props":1394,"children":1396},{"className":1395},[],[1397],{"type":30,"value":1398},"server/routes",{"type":30,"value":1400}," 的区别",{"type":24,"tag":39,"props":1402,"children":1404},{"id":1403},"_31-serverapi",[1405,1407],{"type":30,"value":1406},"3.1 ",{"type":24,"tag":347,"props":1408,"children":1410},{"className":1409},[],[1411],{"type":30,"value":1216},{"type":24,"tag":1065,"props":1413,"children":1414},{},[1415,1420,1425],{"type":24,"tag":67,"props":1416,"children":1417},{},[1418],{"type":30,"value":1419},"面向 API 的约定式目录",{"type":24,"tag":67,"props":1421,"children":1422},{},[1423],{"type":30,"value":1424},"通常返回 JSON",{"type":24,"tag":67,"props":1426,"children":1427},{},[1428],{"type":30,"value":1429},"与 Nuxt 的开发体验高度整合",{"type":24,"tag":39,"props":1431,"children":1433},{"id":1432},"_32-serverroutes",[1434,1436],{"type":30,"value":1435},"3.2 ",{"type":24,"tag":347,"props":1437,"children":1439},{"className":1438},[],[1440],{"type":30,"value":1227},{"type":24,"tag":1065,"props":1442,"children":1443},{},[1444,1449],{"type":24,"tag":67,"props":1445,"children":1446},{},[1447],{"type":30,"value":1448},"更底层，更贴近“HTTP 路由”",{"type":24,"tag":67,"props":1450,"children":1451},{},[1452],{"type":30,"value":1453},"更适合做：Webhook、回调、代理、特殊 content-type",{"type":24,"tag":39,"props":1455,"children":1457},{"id":1456},"_33-实践建议",[1458],{"type":30,"value":1459},"3.3 实践建议",{"type":24,"tag":1065,"props":1461,"children":1462},{},[1463,1473],{"type":24,"tag":67,"props":1464,"children":1465},{},[1466,1468],{"type":30,"value":1467},"普通业务 API：优先 ",{"type":24,"tag":347,"props":1469,"children":1471},{"className":1470},[],[1472],{"type":30,"value":1390},{"type":24,"tag":67,"props":1474,"children":1475},{},[1476,1478],{"type":30,"value":1477},"需要更强控制（stream、代理、非 JSON）：用 ",{"type":24,"tag":347,"props":1479,"children":1481},{"className":1480},[],[1482],{"type":30,"value":1398},{"type":24,"tag":1274,"props":1484,"children":1485},{},[],{"type":24,"tag":25,"props":1487,"children":1489},{"id":1488},"_4-中间件全局逻辑的正确放置",[1490],{"type":30,"value":1491},"4. 中间件：全局逻辑的正确放置",{"type":24,"tag":46,"props":1493,"children":1494},{},[1495],{"type":30,"value":1496},"Nitro 中的中间件通常用于：",{"type":24,"tag":1065,"props":1498,"children":1499},{},[1500,1505,1518,1523],{"type":24,"tag":67,"props":1501,"children":1502},{},[1503],{"type":30,"value":1504},"鉴权/鉴别请求来源",{"type":24,"tag":67,"props":1506,"children":1507},{},[1508,1510,1516],{"type":30,"value":1509},"注入 ",{"type":24,"tag":347,"props":1511,"children":1513},{"className":1512},[],[1514],{"type":30,"value":1515},"requestId",{"type":30,"value":1517},"、trace 信息",{"type":24,"tag":67,"props":1519,"children":1520},{},[1521],{"type":30,"value":1522},"统一错误处理与日志",{"type":24,"tag":67,"props":1524,"children":1525},{},[1526],{"type":30,"value":1527},"基础安全 headers",{"type":24,"tag":46,"props":1529,"children":1530},{},[1531],{"type":30,"value":1532},"一个推荐的中间件职责边界：",{"type":24,"tag":1065,"props":1534,"children":1535},{},[1536,1541],{"type":24,"tag":67,"props":1537,"children":1538},{},[1539],{"type":30,"value":1540},"中间件只做“横切关注点”",{"type":24,"tag":67,"props":1542,"children":1543},{},[1544],{"type":30,"value":1545},"不做具体业务（避免耦合与隐式依赖）",{"type":24,"tag":1274,"props":1547,"children":1548},{},[],{"type":24,"tag":25,"props":1550,"children":1552},{"id":1551},"_5-storage-抽象让缓存与数据存取可替换",[1553],{"type":30,"value":1554},"5. Storage 抽象：让缓存与数据存取可替换",{"type":24,"tag":46,"props":1556,"children":1557},{},[1558,1560,1565],{"type":30,"value":1559},"Nitro 的一个被低估的能力是 ",{"type":24,"tag":347,"props":1561,"children":1563},{"className":1562},[],[1564],{"type":30,"value":1260},{"type":30,"value":61},{"type":24,"tag":1065,"props":1567,"children":1568},{},[1569,1574],{"type":24,"tag":67,"props":1570,"children":1571},{},[1572],{"type":30,"value":1573},"提供 KV 风格 API",{"type":24,"tag":67,"props":1575,"children":1576},{},[1577],{"type":30,"value":1578},"可接入内存、文件、Redis 等（取决于配置与环境）",{"type":24,"tag":46,"props":1580,"children":1581},{},[1582],{"type":30,"value":1583},"你可以用它做：",{"type":24,"tag":1065,"props":1585,"children":1586},{},[1587,1592,1597],{"type":24,"tag":67,"props":1588,"children":1589},{},[1590],{"type":30,"value":1591},"缓存（页面片段、API 结果）",{"type":24,"tag":67,"props":1593,"children":1594},{},[1595],{"type":30,"value":1596},"限流计数器",{"type":24,"tag":67,"props":1598,"children":1599},{},[1600],{"type":30,"value":1601},"临时会话信息",{"type":24,"tag":46,"props":1603,"children":1604},{},[1605],{"type":30,"value":1606},"设计原则：",{"type":24,"tag":1065,"props":1608,"children":1609},{},[1610,1615],{"type":24,"tag":67,"props":1611,"children":1612},{},[1613],{"type":30,"value":1614},"把 storage 当成“可失效缓存”，不要当主数据库",{"type":24,"tag":67,"props":1616,"children":1617},{},[1618],{"type":30,"value":1619},"明确 TTL 与清理策略",{"type":24,"tag":1274,"props":1621,"children":1622},{},[],{"type":24,"tag":25,"props":1624,"children":1626},{"id":1625},"_6-缓存策略把快变成可控的工程能力",[1627],{"type":30,"value":1628},"6. 缓存策略：把“快”变成可控的工程能力",{"type":24,"tag":46,"props":1630,"children":1631},{},[1632],{"type":30,"value":1633},"Nitro 里的缓存往往涉及三层：",{"type":24,"tag":63,"props":1635,"children":1636},{},[1637,1642,1647],{"type":24,"tag":67,"props":1638,"children":1639},{},[1640],{"type":30,"value":1641},"CDN 缓存（边缘）",{"type":24,"tag":67,"props":1643,"children":1644},{},[1645],{"type":30,"value":1646},"Nitro 运行时缓存（storage）",{"type":24,"tag":67,"props":1648,"children":1649},{},[1650],{"type":30,"value":1651},"上游服务缓存（数据库/服务端）",{"type":24,"tag":39,"props":1653,"children":1655},{"id":1654},"_61-api-缓存的推荐做法",[1656],{"type":30,"value":1657},"6.1 API 缓存的推荐做法",{"type":24,"tag":1065,"props":1659,"children":1660},{},[1661,1672],{"type":24,"tag":67,"props":1662,"children":1663},{},[1664,1666],{"type":30,"value":1665},"对“读多写少”的接口做 ",{"type":24,"tag":347,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":30,"value":1671},"stale-while-revalidate",{"type":24,"tag":67,"props":1673,"children":1674},{},[1675],{"type":30,"value":1676},"缓存 key 必须包含：用户态/语言/地区/权限等关键维度",{"type":24,"tag":39,"props":1678,"children":1680},{"id":1679},"_62-不要缓存带用户身份的响应除非你非常确定",[1681],{"type":30,"value":1682},"6.2 不要缓存“带用户身份”的响应（除非你非常确定）",{"type":24,"tag":46,"props":1684,"children":1685},{},[1686],{"type":30,"value":1687},"最容易出事故的是把 A 用户的数据缓存给 B 用户。",{"type":24,"tag":46,"props":1689,"children":1690},{},[1691],{"type":30,"value":1692},"建议：",{"type":24,"tag":1065,"props":1694,"children":1695},{},[1696,1701],{"type":24,"tag":67,"props":1697,"children":1698},{},[1699],{"type":30,"value":1700},"默认对用户态接口不缓存",{"type":24,"tag":67,"props":1702,"children":1703},{},[1704,1706,1712,1714,1720],{"type":30,"value":1705},"必须缓存时，key 中加入 ",{"type":24,"tag":347,"props":1707,"children":1709},{"className":1708},[],[1710],{"type":30,"value":1711},"userId",{"type":30,"value":1713}," 或 ",{"type":24,"tag":347,"props":1715,"children":1717},{"className":1716},[],[1718],{"type":30,"value":1719},"session",{"type":30,"value":1721}," 维度",{"type":24,"tag":1274,"props":1723,"children":1724},{},[],{"type":24,"tag":25,"props":1726,"children":1728},{"id":1727},"_7-部署适配为什么同一套代码能跑在不同环境",[1729],{"type":30,"value":1730},"7. 部署适配：为什么同一套代码能跑在不同环境？",{"type":24,"tag":46,"props":1732,"children":1733},{},[1734],{"type":30,"value":1735},"Nitro 的部署产物通常包含：",{"type":24,"tag":1065,"props":1737,"children":1738},{},[1739,1744,1749],{"type":24,"tag":67,"props":1740,"children":1741},{},[1742],{"type":30,"value":1743},"编译后的 server bundle",{"type":24,"tag":67,"props":1745,"children":1746},{},[1747],{"type":30,"value":1748},"路由清单与运行时配置",{"type":24,"tag":67,"props":1750,"children":1751},{},[1752],{"type":30,"value":1753},"静态资源与预渲染结果（如果启用）",{"type":24,"tag":46,"props":1755,"children":1756},{},[1757],{"type":30,"value":1758},"在不同目标下的差异主要在：",{"type":24,"tag":1065,"props":1760,"children":1761},{},[1762,1767,1772],{"type":24,"tag":67,"props":1763,"children":1764},{},[1765],{"type":30,"value":1766},"运行时能力（Node API 是否可用）",{"type":24,"tag":67,"props":1768,"children":1769},{},[1770],{"type":30,"value":1771},"冷启动与并发模型",{"type":24,"tag":67,"props":1773,"children":1774},{},[1775],{"type":30,"value":1776},"文件系统是否可写",{"type":24,"tag":39,"props":1778,"children":1780},{"id":1779},"_71-node-server",[1781],{"type":30,"value":1782},"7.1 Node Server",{"type":24,"tag":1065,"props":1784,"children":1785},{},[1786,1791],{"type":24,"tag":67,"props":1787,"children":1788},{},[1789],{"type":30,"value":1790},"能力最完整",{"type":24,"tag":67,"props":1792,"children":1793},{},[1794],{"type":30,"value":1795},"适合长连接、websocket（需配合平台）",{"type":24,"tag":39,"props":1797,"children":1799},{"id":1798},"_72-serverless",[1800],{"type":30,"value":1801},"7.2 Serverless",{"type":24,"tag":1065,"props":1803,"children":1804},{},[1805,1810],{"type":24,"tag":67,"props":1806,"children":1807},{},[1808],{"type":30,"value":1809},"冷启动成本、执行时长限制",{"type":24,"tag":67,"props":1811,"children":1812},{},[1813],{"type":30,"value":1814},"更适合 API 型工作负载",{"type":24,"tag":39,"props":1816,"children":1818},{"id":1817},"_73-edge",[1819],{"type":30,"value":1820},"7.3 Edge",{"type":24,"tag":1065,"props":1822,"children":1823},{},[1824,1829],{"type":24,"tag":67,"props":1825,"children":1826},{},[1827],{"type":30,"value":1828},"延迟更低",{"type":24,"tag":67,"props":1830,"children":1831},{},[1832],{"type":30,"value":1833},"运行时限制更严格（例如 Node API 不可用）",{"type":24,"tag":46,"props":1835,"children":1836},{},[1837],{"type":30,"value":1838},"实践建议：",{"type":24,"tag":1065,"props":1840,"children":1841},{},[1842,1847],{"type":24,"tag":67,"props":1843,"children":1844},{},[1845],{"type":30,"value":1846},"如果你依赖复杂 Node 能力（例如图像处理、原生模块），优先 Node/Serverless",{"type":24,"tag":67,"props":1848,"children":1849},{},[1850],{"type":30,"value":1851},"如果你追求极致延迟且逻辑简单，考虑 Edge",{"type":24,"tag":1274,"props":1853,"children":1854},{},[],{"type":24,"tag":25,"props":1856,"children":1858},{"id":1857},"_8-性能调优nitro-侧你能做什么",[1859],{"type":30,"value":1860},"8. 性能调优：Nitro 侧你能做什么？",{"type":24,"tag":39,"props":1862,"children":1864},{"id":1863},"_81-减少阻塞-io",[1865],{"type":30,"value":1866},"8.1 减少阻塞 I/O",{"type":24,"tag":1065,"props":1868,"children":1869},{},[1870,1875],{"type":24,"tag":67,"props":1871,"children":1872},{},[1873],{"type":30,"value":1874},"避免请求内做同步文件读写",{"type":24,"tag":67,"props":1876,"children":1877},{},[1878],{"type":30,"value":1879},"对“配置/规则”等可缓存数据做启动预热",{"type":24,"tag":39,"props":1881,"children":1883},{"id":1882},"_82-控制上游依赖",[1884],{"type":30,"value":1885},"8.2 控制上游依赖",{"type":24,"tag":1065,"props":1887,"children":1888},{},[1889,1894],{"type":24,"tag":67,"props":1890,"children":1891},{},[1892],{"type":30,"value":1893},"给外部请求设超时（例如 2~3s）",{"type":24,"tag":67,"props":1895,"children":1896},{},[1897],{"type":30,"value":1898},"加重试要谨慎（避免雪崩）",{"type":24,"tag":39,"props":1900,"children":1902},{"id":1901},"_83-响应体积与压缩",[1903],{"type":30,"value":1904},"8.3 响应体积与压缩",{"type":24,"tag":1065,"props":1906,"children":1907},{},[1908,1913],{"type":24,"tag":67,"props":1909,"children":1910},{},[1911],{"type":30,"value":1912},"JSON 输出控制字段",{"type":24,"tag":67,"props":1914,"children":1915},{},[1916],{"type":30,"value":1917},"开启 gzip/br",{"type":24,"tag":1274,"props":1919,"children":1920},{},[],{"type":24,"tag":25,"props":1922,"children":1924},{"id":1923},"_9-可观测性没有观测就没有稳定",[1925],{"type":30,"value":1926},"9. 可观测性：没有观测就没有“稳定”",{"type":24,"tag":46,"props":1928,"children":1929},{},[1930],{"type":30,"value":1931},"建议 Nitro 侧最小可观测集合：",{"type":24,"tag":1065,"props":1933,"children":1934},{},[1935,1940,1945,1950],{"type":24,"tag":67,"props":1936,"children":1937},{},[1938],{"type":30,"value":1939},"requestId/traceId",{"type":24,"tag":67,"props":1941,"children":1942},{},[1943],{"type":30,"value":1944},"关键路由耗时（p50/p95）",{"type":24,"tag":67,"props":1946,"children":1947},{},[1948],{"type":30,"value":1949},"错误率（按路由/按状态码）",{"type":24,"tag":67,"props":1951,"children":1952},{},[1953],{"type":30,"value":1954},"上游依赖耗时（DB/HTTP）",{"type":24,"tag":46,"props":1956,"children":1957},{},[1958],{"type":30,"value":1959},"落地方式：",{"type":24,"tag":1065,"props":1961,"children":1962},{},[1963,1968],{"type":24,"tag":67,"props":1964,"children":1965},{},[1966],{"type":30,"value":1967},"在中间件注入 requestId",{"type":24,"tag":67,"props":1969,"children":1970},{},[1971],{"type":30,"value":1972},"在统一错误处理处记录结构化日志",{"type":24,"tag":1274,"props":1974,"children":1975},{},[],{"type":24,"tag":25,"props":1977,"children":1979},{"id":1978},"_10-一个推荐的-nitro-工程结构",[1980],{"type":30,"value":1981},"10. 一个推荐的 Nitro 工程结构",{"type":24,"tag":46,"props":1983,"children":1984},{},[1985],{"type":30,"value":1986},"在 Nuxt 项目里，你可以这样组织服务端代码：",{"type":24,"tag":1065,"props":1988,"children":1989},{},[1990,2001,2012,2023,2034],{"type":24,"tag":67,"props":1991,"children":1992},{},[1993,1999],{"type":24,"tag":347,"props":1994,"children":1996},{"className":1995},[],[1997],{"type":30,"value":1998},"server/middleware/",{"type":30,"value":2000},"：鉴权、日志、headers、rate limit",{"type":24,"tag":67,"props":2002,"children":2003},{},[2004,2010],{"type":24,"tag":347,"props":2005,"children":2007},{"className":2006},[],[2008],{"type":30,"value":2009},"server/api/",{"type":30,"value":2011},"：业务 API（薄控制器）",{"type":24,"tag":67,"props":2013,"children":2014},{},[2015,2021],{"type":24,"tag":347,"props":2016,"children":2018},{"className":2017},[],[2019],{"type":30,"value":2020},"server/services/",{"type":30,"value":2022},"：领域服务（可复用）",{"type":24,"tag":67,"props":2024,"children":2025},{},[2026,2032],{"type":24,"tag":347,"props":2027,"children":2029},{"className":2028},[],[2030],{"type":30,"value":2031},"server/repositories/",{"type":30,"value":2033},"：数据访问层",{"type":24,"tag":67,"props":2035,"children":2036},{},[2037,2043],{"type":24,"tag":347,"props":2038,"children":2040},{"className":2039},[],[2041],{"type":30,"value":2042},"server/utils/",{"type":30,"value":2044},"：纯工具",{"type":24,"tag":46,"props":2046,"children":2047},{},[2048],{"type":30,"value":2049},"目标是：",{"type":24,"tag":1065,"props":2051,"children":2052},{},[2053,2058,2063],{"type":24,"tag":67,"props":2054,"children":2055},{},[2056],{"type":30,"value":2057},"handler 只做协议适配",{"type":24,"tag":67,"props":2059,"children":2060},{},[2061],{"type":30,"value":2062},"业务逻辑可复用、可测试",{"type":24,"tag":67,"props":2064,"children":2065},{},[2066],{"type":30,"value":2067},"横切能力集中化",{"type":24,"tag":1274,"props":2069,"children":2070},{},[],{"type":24,"tag":25,"props":2072,"children":2073},{"id":985},[2074],{"type":30,"value":985},{"type":24,"tag":46,"props":2076,"children":2077},{},[2078,2080,2085],{"type":30,"value":2079},"Nitro 的本质是：把 Nuxt 的服务端能力变成一个",{"type":24,"tag":55,"props":2081,"children":2082},{},[2083],{"type":30,"value":2084},"可编译、可移植、可观测",{"type":30,"value":2086},"的运行时系统。",{"type":24,"tag":46,"props":2088,"children":2089},{},[2090],{"type":30,"value":2091},"你一旦理解了它的生命周期与边界，就可以更有信心地在 Nuxt 里做：",{"type":24,"tag":1065,"props":2093,"children":2094},{},[2095,2100,2105,2110],{"type":24,"tag":67,"props":2096,"children":2097},{},[2098],{"type":30,"value":2099},"性能友好的 API",{"type":24,"tag":67,"props":2101,"children":2102},{},[2103],{"type":30,"value":2104},"可控的缓存",{"type":24,"tag":67,"props":2106,"children":2107},{},[2108],{"type":30,"value":2109},"稳定的鉴权与错误处理",{"type":24,"tag":67,"props":2111,"children":2112},{},[2113],{"type":30,"value":2114},"面向多环境部署的工程架构",{"title":7,"searchDepth":1111,"depth":1111,"links":2116},[2117,2118,2119,2120,2128,2129,2130,2134,2139,2144,2145,2146],{"id":1185,"depth":1114,"text":1169},{"id":1279,"depth":1114,"text":1282},{"id":1339,"depth":1114,"text":1342},{"id":1381,"depth":1114,"text":2121,"children":2122},"3. 路由系统：server/api 与 server/routes 的区别",[2123,2125,2127],{"id":1403,"depth":1111,"text":2124},"3.1 server/api/*",{"id":1432,"depth":1111,"text":2126},"3.2 server/routes/*",{"id":1456,"depth":1111,"text":1459},{"id":1488,"depth":1114,"text":1491},{"id":1551,"depth":1114,"text":1554},{"id":1625,"depth":1114,"text":1628,"children":2131},[2132,2133],{"id":1654,"depth":1111,"text":1657},{"id":1679,"depth":1111,"text":1682},{"id":1727,"depth":1114,"text":1730,"children":2135},[2136,2137,2138],{"id":1779,"depth":1111,"text":1782},{"id":1798,"depth":1111,"text":1801},{"id":1817,"depth":1111,"text":1820},{"id":1857,"depth":1114,"text":1860,"children":2140},[2141,2142,2143],{"id":1863,"depth":1111,"text":1866},{"id":1882,"depth":1111,"text":1885},{"id":1901,"depth":1111,"text":1904},{"id":1923,"depth":1114,"text":1926},{"id":1978,"depth":1114,"text":1981},{"id":985,"depth":1114,"text":985},"content:topics:nuxt:nitro-engine-deep-dive.md","topics/nuxt/nitro-engine-deep-dive.md","topics/nuxt/nitro-engine-deep-dive",{"_path":2151,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2152,"description":2153,"date":1171,"topic":5,"author":11,"tags":2154,"image":2158,"featured":18,"readingTime":2159,"body":2160,"_type":1160,"_id":2925,"_source":1162,"_file":2926,"_stem":2927,"_extension":1165},"/topics/nuxt/nuxt-rendering-modes-guide","Nuxt 渲染模式选择指南","从 SEO、性能、成本与一致性出发，系统对比 Nuxt 的 CSR/SSR/SSG/ISR（与预渲染）等模式，给出可执行的选型矩阵与落地架构建议。",[1173,1175,2155,2156,2157],"SSG","ISR","SEO","/images/topics/nuxt/rendering-modes.jpg",22,{"type":21,"children":2161,"toc":2908},[2162,2167,2172,2177,2205,2217,2220,2226,2231,2254,2259,2262,2268,2274,2279,2297,2302,2321,2327,2331,2344,2348,2361,2367,2371,2384,2388,2401,2407,2412,2425,2429,2442,2446,2459,2465,2469,2482,2486,2499,2502,2508,2513,2674,2677,2683,2688,2706,2711,2724,2727,2733,2738,2743,2766,2771,2789,2792,2798,2816,2819,2825,2878,2881,2885,2890],{"type":24,"tag":25,"props":2163,"children":2165},{"id":2164},"nuxt-渲染模式选择指南",[2166],{"type":30,"value":2152},{"type":24,"tag":46,"props":2168,"children":2169},{},[2170],{"type":30,"value":2171},"“到底要不要 SSR？”是 Nuxt 项目里最常见、也最容易吵起来的问题。",{"type":24,"tag":46,"props":2173,"children":2174},{},[2175],{"type":30,"value":2176},"原因是：渲染模式不是一个单点选择，它同时牵动：",{"type":24,"tag":1065,"props":2178,"children":2179},{},[2180,2185,2190,2195,2200],{"type":24,"tag":67,"props":2181,"children":2182},{},[2183],{"type":30,"value":2184},"SEO（可索引内容是否直出）",{"type":24,"tag":67,"props":2186,"children":2187},{},[2188],{"type":30,"value":2189},"性能（TTFB/LCP/INP）",{"type":24,"tag":67,"props":2191,"children":2192},{},[2193],{"type":30,"value":2194},"成本（回源、算力、带宽）",{"type":24,"tag":67,"props":2196,"children":2197},{},[2198],{"type":30,"value":2199},"一致性（内容更新策略、缓存失效）",{"type":24,"tag":67,"props":2201,"children":2202},{},[2203],{"type":30,"value":2204},"工程复杂度（部署、观测、回滚）",{"type":24,"tag":46,"props":2206,"children":2207},{},[2208,2210,2215],{"type":30,"value":2209},"这篇文章给你一套",{"type":24,"tag":55,"props":2211,"children":2212},{},[2213],{"type":30,"value":2214},"可执行的选型方法",{"type":30,"value":2216},"：先定义目标，再选模式，最后给落地结构与检查清单。",{"type":24,"tag":1274,"props":2218,"children":2219},{},[],{"type":24,"tag":25,"props":2221,"children":2223},{"id":2222},"_1-四个维度决定你的模式",[2224],{"type":30,"value":2225},"1. 四个维度，决定你的模式",{"type":24,"tag":46,"props":2227,"children":2228},{},[2229],{"type":30,"value":2230},"在做任何选择前，先回答四个问题：",{"type":24,"tag":63,"props":2232,"children":2233},{},[2234,2239,2244,2249],{"type":24,"tag":67,"props":2235,"children":2236},{},[2237],{"type":30,"value":2238},"页面是否需要 SEO？（搜索引擎是否必须看到正文）",{"type":24,"tag":67,"props":2240,"children":2241},{},[2242],{"type":30,"value":2243},"数据是否强一致？（用户态/支付/权限）",{"type":24,"tag":67,"props":2245,"children":2246},{},[2247],{"type":30,"value":2248},"更新频率如何？（发布频繁 vs 偶尔）",{"type":24,"tag":67,"props":2250,"children":2251},{},[2252],{"type":30,"value":2253},"流量模型是什么？（突发、平稳、长尾）",{"type":24,"tag":46,"props":2255,"children":2256},{},[2257],{"type":30,"value":2258},"这些问题比“SSR 快还是慢”更重要。",{"type":24,"tag":1274,"props":2260,"children":2261},{},[],{"type":24,"tag":25,"props":2263,"children":2265},{"id":2264},"_2-主要模式概览csr-ssr-ssg-isr-预渲染",[2266],{"type":30,"value":2267},"2. 主要模式概览：CSR / SSR / SSG / ISR / 预渲染",{"type":24,"tag":39,"props":2269,"children":2271},{"id":2270},"_21-csr纯客户端渲染",[2272],{"type":30,"value":2273},"2.1 CSR（纯客户端渲染）",{"type":24,"tag":46,"props":2275,"children":2276},{},[2277],{"type":30,"value":2278},"特点：",{"type":24,"tag":1065,"props":2280,"children":2281},{},[2282,2287,2292],{"type":24,"tag":67,"props":2283,"children":2284},{},[2285],{"type":30,"value":2286},"HTML 只有壳",{"type":24,"tag":67,"props":2288,"children":2289},{},[2290],{"type":30,"value":2291},"SEO 风险大（除非你不索引）",{"type":24,"tag":67,"props":2293,"children":2294},{},[2295],{"type":30,"value":2296},"首屏性能取决于 JS 与接口",{"type":24,"tag":46,"props":2298,"children":2299},{},[2300],{"type":30,"value":2301},"适用：",{"type":24,"tag":1065,"props":2303,"children":2304},{},[2305,2310],{"type":24,"tag":67,"props":2306,"children":2307},{},[2308],{"type":30,"value":2309},"用户中心、后台、强交互工具",{"type":24,"tag":67,"props":2311,"children":2312},{},[2313,2315],{"type":30,"value":2314},"不需要索引或明确 ",{"type":24,"tag":347,"props":2316,"children":2318},{"className":2317},[],[2319],{"type":30,"value":2320},"noindex",{"type":24,"tag":39,"props":2322,"children":2324},{"id":2323},"_22-ssr服务端渲染",[2325],{"type":30,"value":2326},"2.2 SSR（服务端渲染）",{"type":24,"tag":46,"props":2328,"children":2329},{},[2330],{"type":30,"value":2278},{"type":24,"tag":1065,"props":2332,"children":2333},{},[2334,2339],{"type":24,"tag":67,"props":2335,"children":2336},{},[2337],{"type":30,"value":2338},"首屏 HTML 直出，SEO 友好",{"type":24,"tag":67,"props":2340,"children":2341},{},[2342],{"type":30,"value":2343},"每次请求可能都需要回源（需要缓存）",{"type":24,"tag":46,"props":2345,"children":2346},{},[2347],{"type":30,"value":2301},{"type":24,"tag":1065,"props":2349,"children":2350},{},[2351,2356],{"type":24,"tag":67,"props":2352,"children":2353},{},[2354],{"type":30,"value":2355},"内容需要 SEO，但数据强动态",{"type":24,"tag":67,"props":2357,"children":2358},{},[2359],{"type":30,"value":2360},"你有完善的缓存策略",{"type":24,"tag":39,"props":2362,"children":2364},{"id":2363},"_23-ssg静态生成",[2365],{"type":30,"value":2366},"2.3 SSG（静态生成）",{"type":24,"tag":46,"props":2368,"children":2369},{},[2370],{"type":30,"value":2278},{"type":24,"tag":1065,"props":2372,"children":2373},{},[2374,2379],{"type":24,"tag":67,"props":2375,"children":2376},{},[2377],{"type":30,"value":2378},"性能与稳定性最好",{"type":24,"tag":67,"props":2380,"children":2381},{},[2382],{"type":30,"value":2383},"更新成本在“构建时”",{"type":24,"tag":46,"props":2385,"children":2386},{},[2387],{"type":30,"value":2301},{"type":24,"tag":1065,"props":2389,"children":2390},{},[2391,2396],{"type":24,"tag":67,"props":2392,"children":2393},{},[2394],{"type":30,"value":2395},"内容站、文档站、营销页",{"type":24,"tag":67,"props":2397,"children":2398},{},[2399],{"type":30,"value":2400},"更新频率不高或可接受构建延迟",{"type":24,"tag":39,"props":2402,"children":2404},{"id":2403},"_24-isr增量静态再生按需生成",[2405],{"type":30,"value":2406},"2.4 ISR（增量静态再生/按需生成）",{"type":24,"tag":46,"props":2408,"children":2409},{},[2410],{"type":30,"value":2411},"在 Nuxt 体系里，ISR 的表达可能来自：",{"type":24,"tag":1065,"props":2413,"children":2414},{},[2415,2420],{"type":24,"tag":67,"props":2416,"children":2417},{},[2418],{"type":30,"value":2419},"生成策略 + 缓存策略",{"type":24,"tag":67,"props":2421,"children":2422},{},[2423],{"type":30,"value":2424},"或配合边缘缓存与按需失效",{"type":24,"tag":46,"props":2426,"children":2427},{},[2428],{"type":30,"value":2278},{"type":24,"tag":1065,"props":2430,"children":2431},{},[2432,2437],{"type":24,"tag":67,"props":2433,"children":2434},{},[2435],{"type":30,"value":2436},"静态化收益 + 可控更新",{"type":24,"tag":67,"props":2438,"children":2439},{},[2440],{"type":30,"value":2441},"需要你设计“失效与再生成”",{"type":24,"tag":46,"props":2443,"children":2444},{},[2445],{"type":30,"value":2301},{"type":24,"tag":1065,"props":2447,"children":2448},{},[2449,2454],{"type":24,"tag":67,"props":2450,"children":2451},{},[2452],{"type":30,"value":2453},"内容更新频繁，但仍要 SEO",{"type":24,"tag":67,"props":2455,"children":2456},{},[2457],{"type":30,"value":2458},"你希望在高峰也保持稳定",{"type":24,"tag":39,"props":2460,"children":2462},{"id":2461},"_25-预渲染prerender",[2463],{"type":30,"value":2464},"2.5 预渲染（prerender）",{"type":24,"tag":46,"props":2466,"children":2467},{},[2468],{"type":30,"value":2278},{"type":24,"tag":1065,"props":2470,"children":2471},{},[2472,2477],{"type":24,"tag":67,"props":2473,"children":2474},{},[2475],{"type":30,"value":2476},"对部分路由预先生成 HTML",{"type":24,"tag":67,"props":2478,"children":2479},{},[2480],{"type":30,"value":2481},"适合混合站点",{"type":24,"tag":46,"props":2483,"children":2484},{},[2485],{"type":30,"value":2301},{"type":24,"tag":1065,"props":2487,"children":2488},{},[2489,2494],{"type":24,"tag":67,"props":2490,"children":2491},{},[2492],{"type":30,"value":2493},"首页/核心落地页需要 SEO",{"type":24,"tag":67,"props":2495,"children":2496},{},[2497],{"type":30,"value":2498},"工具页/用户页不需要 SEO",{"type":24,"tag":1274,"props":2500,"children":2501},{},[],{"type":24,"tag":25,"props":2503,"children":2505},{"id":2504},"_3-选型矩阵可直接用",[2506],{"type":30,"value":2507},"3. 选型矩阵（可直接用）",{"type":24,"tag":46,"props":2509,"children":2510},{},[2511],{"type":30,"value":2512},"你可以按路由维度做选型，而不是全站一刀切。",{"type":24,"tag":129,"props":2514,"children":2515},{},[2516,2541],{"type":24,"tag":133,"props":2517,"children":2518},{},[2519],{"type":24,"tag":137,"props":2520,"children":2521},{},[2522,2527,2531,2536],{"type":24,"tag":141,"props":2523,"children":2524},{},[2525],{"type":30,"value":2526},"页面类型",{"type":24,"tag":141,"props":2528,"children":2529},{},[2530],{"type":30,"value":2157},{"type":24,"tag":141,"props":2532,"children":2533},{},[2534],{"type":30,"value":2535},"更新频率",{"type":24,"tag":141,"props":2537,"children":2538},{},[2539],{"type":30,"value":2540},"推荐",{"type":24,"tag":156,"props":2542,"children":2543},{},[2544,2567,2588,2609,2630,2652],{"type":24,"tag":137,"props":2545,"children":2546},{},[2547,2552,2557,2562],{"type":24,"tag":163,"props":2548,"children":2549},{},[2550],{"type":30,"value":2551},"文章详情",{"type":24,"tag":163,"props":2553,"children":2554},{},[2555],{"type":30,"value":2556},"高",{"type":24,"tag":163,"props":2558,"children":2559},{},[2560],{"type":30,"value":2561},"中",{"type":24,"tag":163,"props":2563,"children":2564},{},[2565],{"type":30,"value":2566},"SSG/ISR",{"type":24,"tag":137,"props":2568,"children":2569},{},[2570,2575,2579,2583],{"type":24,"tag":163,"props":2571,"children":2572},{},[2573],{"type":30,"value":2574},"文章列表",{"type":24,"tag":163,"props":2576,"children":2577},{},[2578],{"type":30,"value":2556},{"type":24,"tag":163,"props":2580,"children":2581},{},[2582],{"type":30,"value":2561},{"type":24,"tag":163,"props":2584,"children":2585},{},[2586],{"type":30,"value":2587},"SSG/ISR（注意聚合页）",{"type":24,"tag":137,"props":2589,"children":2590},{},[2591,2596,2600,2604],{"type":24,"tag":163,"props":2592,"children":2593},{},[2594],{"type":30,"value":2595},"产品详情",{"type":24,"tag":163,"props":2597,"children":2598},{},[2599],{"type":30,"value":2556},{"type":24,"tag":163,"props":2601,"children":2602},{},[2603],{"type":30,"value":2556},{"type":24,"tag":163,"props":2605,"children":2606},{},[2607],{"type":30,"value":2608},"ISR/SSR（配缓存）",{"type":24,"tag":137,"props":2610,"children":2611},{},[2612,2617,2621,2625],{"type":24,"tag":163,"props":2613,"children":2614},{},[2615],{"type":30,"value":2616},"搜索结果",{"type":24,"tag":163,"props":2618,"children":2619},{},[2620],{"type":30,"value":2561},{"type":24,"tag":163,"props":2622,"children":2623},{},[2624],{"type":30,"value":2556},{"type":24,"tag":163,"props":2626,"children":2627},{},[2628],{"type":30,"value":2629},"SSR/CSR（配 noindex）",{"type":24,"tag":137,"props":2631,"children":2632},{},[2633,2638,2643,2647],{"type":24,"tag":163,"props":2634,"children":2635},{},[2636],{"type":30,"value":2637},"用户中心",{"type":24,"tag":163,"props":2639,"children":2640},{},[2641],{"type":30,"value":2642},"低",{"type":24,"tag":163,"props":2644,"children":2645},{},[2646],{"type":30,"value":2556},{"type":24,"tag":163,"props":2648,"children":2649},{},[2650],{"type":30,"value":2651},"CSR",{"type":24,"tag":137,"props":2653,"children":2654},{},[2655,2660,2665,2669],{"type":24,"tag":163,"props":2656,"children":2657},{},[2658],{"type":30,"value":2659},"工具页",{"type":24,"tag":163,"props":2661,"children":2662},{},[2663],{"type":30,"value":2664},"低/中",{"type":24,"tag":163,"props":2666,"children":2667},{},[2668],{"type":30,"value":2561},{"type":24,"tag":163,"props":2670,"children":2671},{},[2672],{"type":30,"value":2673},"CSR + 预渲染核心路由",{"type":24,"tag":1274,"props":2675,"children":2676},{},[],{"type":24,"tag":25,"props":2678,"children":2680},{"id":2679},"_4-混合渲染真正的生产最优解",[2681],{"type":30,"value":2682},"4. 混合渲染：真正的生产最优解",{"type":24,"tag":46,"props":2684,"children":2685},{},[2686],{"type":30,"value":2687},"生产上最常见的模式是混合：",{"type":24,"tag":1065,"props":2689,"children":2690},{},[2691,2696,2701],{"type":24,"tag":67,"props":2692,"children":2693},{},[2694],{"type":30,"value":2695},"公共内容：静态化（SSG/ISR）+ CDN",{"type":24,"tag":67,"props":2697,"children":2698},{},[2699],{"type":30,"value":2700},"用户态内容：CSR 或 SSR（private/no-store）",{"type":24,"tag":67,"props":2702,"children":2703},{},[2704],{"type":30,"value":2705},"关键落地页：预渲染",{"type":24,"tag":46,"props":2707,"children":2708},{},[2709],{"type":30,"value":2710},"好处：",{"type":24,"tag":1065,"props":2712,"children":2713},{},[2714,2719],{"type":24,"tag":67,"props":2715,"children":2716},{},[2717],{"type":30,"value":2718},"SEO 与性能兼得",{"type":24,"tag":67,"props":2720,"children":2721},{},[2722],{"type":30,"value":2723},"成本可控",{"type":24,"tag":1274,"props":2725,"children":2726},{},[],{"type":24,"tag":25,"props":2728,"children":2730},{"id":2729},"_5-缓存与失效模式落地的关键",[2731],{"type":30,"value":2732},"5. 缓存与失效：模式落地的关键",{"type":24,"tag":46,"props":2734,"children":2735},{},[2736],{"type":30,"value":2737},"无论你选 SSR 还是 ISR，本质都离不开缓存。",{"type":24,"tag":46,"props":2739,"children":2740},{},[2741],{"type":30,"value":2742},"建议把缓存分层：",{"type":24,"tag":1065,"props":2744,"children":2745},{},[2746,2751,2756,2761],{"type":24,"tag":67,"props":2747,"children":2748},{},[2749],{"type":30,"value":2750},"浏览器",{"type":24,"tag":67,"props":2752,"children":2753},{},[2754],{"type":30,"value":2755},"CDN",{"type":24,"tag":67,"props":2757,"children":2758},{},[2759],{"type":30,"value":2760},"应用侧（server runtime）",{"type":24,"tag":67,"props":2762,"children":2763},{},[2764],{"type":30,"value":2765},"数据侧（Redis/DB）",{"type":24,"tag":46,"props":2767,"children":2768},{},[2769],{"type":30,"value":2770},"并给每条路由明确：",{"type":24,"tag":1065,"props":2772,"children":2773},{},[2774,2779,2784],{"type":24,"tag":67,"props":2775,"children":2776},{},[2777],{"type":30,"value":2778},"是否 public/private",{"type":24,"tag":67,"props":2780,"children":2781},{},[2782],{"type":30,"value":2783},"TTL 多久",{"type":24,"tag":67,"props":2785,"children":2786},{},[2787],{"type":30,"value":2788},"写操作后如何失效",{"type":24,"tag":1274,"props":2790,"children":2791},{},[],{"type":24,"tag":25,"props":2793,"children":2795},{"id":2794},"_6-常见误区",[2796],{"type":30,"value":2797},"6. 常见误区",{"type":24,"tag":1065,"props":2799,"children":2800},{},[2801,2806,2811],{"type":24,"tag":67,"props":2802,"children":2803},{},[2804],{"type":30,"value":2805},"“SSR 一定更快”：不一定，TTFB 可能更慢；LCP 受资源与主线程影响更大",{"type":24,"tag":67,"props":2807,"children":2808},{},[2809],{"type":30,"value":2810},"“SSG 一定更好”：构建成本与发布延迟可能无法接受",{"type":24,"tag":67,"props":2812,"children":2813},{},[2814],{"type":30,"value":2815},"“全站一个模式最省事”：短期省事，长期很难优化与扩展",{"type":24,"tag":1274,"props":2817,"children":2818},{},[],{"type":24,"tag":25,"props":2820,"children":2822},{"id":2821},"_7-上线检查清单",[2823],{"type":30,"value":2824},"7. 上线检查清单",{"type":24,"tag":1065,"props":2826,"children":2829},{"className":2827},[2828],"contains-task-list",[2830,2842,2851,2860,2869],{"type":24,"tag":67,"props":2831,"children":2834},{"className":2832},[2833],"task-list-item",[2835,2840],{"type":24,"tag":2836,"props":2837,"children":2839},"input",{"disabled":18,"type":2838},"checkbox",[],{"type":30,"value":2841}," 按路由明确 SEO 需求（哪些可索引）",{"type":24,"tag":67,"props":2843,"children":2845},{"className":2844},[2833],[2846,2849],{"type":24,"tag":2836,"props":2847,"children":2848},{"disabled":18,"type":2838},[],{"type":30,"value":2850}," 用户态页面是否 private/no-store",{"type":24,"tag":67,"props":2852,"children":2854},{"className":2853},[2833],[2855,2858],{"type":24,"tag":2836,"props":2856,"children":2857},{"disabled":18,"type":2838},[],{"type":30,"value":2859}," 公共内容是否走 CDN 并有合理 TTL",{"type":24,"tag":67,"props":2861,"children":2863},{"className":2862},[2833],[2864,2867],{"type":24,"tag":2836,"props":2865,"children":2866},{"disabled":18,"type":2838},[],{"type":30,"value":2868}," 更新路径是否有失效机制（发布事件）",{"type":24,"tag":67,"props":2870,"children":2872},{"className":2871},[2833],[2873,2876],{"type":24,"tag":2836,"props":2874,"children":2875},{"disabled":18,"type":2838},[],{"type":30,"value":2877}," 是否有 RUM/日志来验证效果",{"type":24,"tag":1274,"props":2879,"children":2880},{},[],{"type":24,"tag":25,"props":2882,"children":2883},{"id":985},[2884],{"type":30,"value":985},{"type":24,"tag":46,"props":2886,"children":2887},{},[2888],{"type":30,"value":2889},"Nuxt 渲染模式选型的正确做法是：",{"type":24,"tag":1065,"props":2891,"children":2892},{},[2893,2898,2903],{"type":24,"tag":67,"props":2894,"children":2895},{},[2896],{"type":30,"value":2897},"以“页面类型”而不是“站点整体”做选择",{"type":24,"tag":67,"props":2899,"children":2900},{},[2901],{"type":30,"value":2902},"把缓存与失效当成一等公民",{"type":24,"tag":67,"props":2904,"children":2905},{},[2906],{"type":30,"value":2907},"用观测验证，而不是凭感觉",{"title":7,"searchDepth":1111,"depth":1111,"links":2909},[2910,2911,2912,2919,2920,2921,2922,2923,2924],{"id":2164,"depth":1114,"text":2152},{"id":2222,"depth":1114,"text":2225},{"id":2264,"depth":1114,"text":2267,"children":2913},[2914,2915,2916,2917,2918],{"id":2270,"depth":1111,"text":2273},{"id":2323,"depth":1111,"text":2326},{"id":2363,"depth":1111,"text":2366},{"id":2403,"depth":1111,"text":2406},{"id":2461,"depth":1111,"text":2464},{"id":2504,"depth":1114,"text":2507},{"id":2679,"depth":1114,"text":2682},{"id":2729,"depth":1114,"text":2732},{"id":2794,"depth":1114,"text":2797},{"id":2821,"depth":1114,"text":2824},{"id":985,"depth":1114,"text":985},"content:topics:nuxt:nuxt-rendering-modes-guide.md","topics/nuxt/nuxt-rendering-modes-guide.md","topics/nuxt/nuxt-rendering-modes-guide",{"_path":2929,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2930,"description":2931,"date":2932,"topic":5,"author":11,"tags":2933,"image":2938,"featured":18,"readingTime":2939,"body":2940,"_type":1160,"_id":3459,"_source":1162,"_file":3460,"_stem":3461,"_extension":1165},"/topics/nuxt/nuxt4-major-updates-overview","Nuxt 4 重大更新全面解读：架构升级与开发体验革新","深入解析 Nuxt 4 的重大更新，包括新目录结构、Nitro 2.0 引擎、兼容性层变化、性能优化等核心改进，帮助开发者全面了解新版本特性并做好升级准备。","2026-01-18",[2934,2935,1175,2936,2937],"Nuxt 4","Vue","全栈框架","版本升级","/images/topics/nuxt/nuxt4-features-overview.jpg",16,{"type":21,"children":2941,"toc":3420},[2942,2948,2954,2959,2964,2970,2976,2981,2989,2997,3005,3011,3016,3025,3031,3040,3046,3052,3057,3066,3072,3081,3087,3096,3102,3108,3117,3123,3132,3138,3147,3153,3159,3168,3174,3183,3189,3198,3207,3213,3219,3228,3234,3243,3249,3258,3264,3270,3279,3285,3294,3300,3306,3316,3322,3331,3337,3342,3347,3352,3370,3373,3377],{"type":24,"tag":25,"props":2943,"children":2945},{"id":2944},"nuxt-4-重大更新全面解读",[2946],{"type":30,"value":2947},"Nuxt 4 重大更新全面解读",{"type":24,"tag":25,"props":2949,"children":2951},{"id":2950},"引言nuxt-的又一次进化",[2952],{"type":30,"value":2953},"引言：Nuxt 的又一次进化",{"type":24,"tag":46,"props":2955,"children":2956},{},[2957],{"type":30,"value":2958},"Nuxt 4 的发布标志着这个 Vue 生态中最受欢迎的全栈框架又迈入了新阶段。从 Nuxt 2 到 Nuxt 3 是一次彻底重写，而 Nuxt 3 到 Nuxt 4 则是在成熟架构上的精进打磨——更清晰的目录结构、更强大的引擎、更好的开发体验。",{"type":24,"tag":46,"props":2960,"children":2961},{},[2962],{"type":30,"value":2963},"这篇文章将全面解读 Nuxt 4 的核心变化，帮助你理解这些改动背后的设计理念，以及它们将如何影响你的日常开发。",{"type":24,"tag":25,"props":2965,"children":2967},{"id":2966},"第一部分新目录结构",[2968],{"type":30,"value":2969},"第一部分：新目录结构",{"type":24,"tag":39,"props":2971,"children":2973},{"id":2972},"_11-从扁平到分层",[2974],{"type":30,"value":2975},"1.1 从扁平到分层",{"type":24,"tag":46,"props":2977,"children":2978},{},[2979],{"type":30,"value":2980},"Nuxt 4 引入了新的目录结构，将应用代码与配置分离：",{"type":24,"tag":342,"props":2982,"children":2984},{"code":2983},"# Nuxt 3 目录结构\nproject/\n├── .nuxt/\n├── app.vue\n├── components/\n├── composables/\n├── layouts/\n├── middleware/\n├── pages/\n├── plugins/\n├── public/\n├── server/\n├── nuxt.config.ts\n└── package.json\n\n# Nuxt 4 新目录结构\nproject/\n├── .nuxt/\n├── app/ # 应用代码集中在 app/ 目录\n│ ├── app.vue\n│ ├── components/\n│ ├── composables/\n│ ├── layouts/\n│ ├── middleware/\n│ ├── pages/\n│ └── plugins/\n├── public/\n├── server/\n├── nuxt.config.ts\n└── package.json\n",[2985],{"type":24,"tag":347,"props":2986,"children":2987},{"__ignoreMap":7},[2988],{"type":30,"value":2983},{"type":24,"tag":46,"props":2990,"children":2991},{},[2992],{"type":24,"tag":55,"props":2993,"children":2994},{},[2995],{"type":30,"value":2996},"为什么这样设计？",{"type":24,"tag":342,"props":2998,"children":3000},{"code":2999},"┌────────────────────────────────────────────────────────────┐\n│ 新目录结构的设计理念 │\n├────────────────────────────────────────────────────────────┤\n│ │\n│ 1. 关注点分离 │\n│ ├── app/ - 客户端/同构代码 │\n│ ├── server/ - 服务端代码 │\n│ └── 根目录 - 配置和公共资源 │\n│ │\n│ 2. 更清晰的项目边界 │\n│ ├── Monorepo 友好 │\n│ ├── 多应用项目更清晰 │\n│ └── 与其他框架惯例对齐 │\n│ │\n│ 3. 未来扩展性 │\n│ ├── 为多前端支持做准备 │\n│ └── 便于工具链识别和处理 │\n│ │\n└────────────────────────────────────────────────────────────┘\n",[3001],{"type":24,"tag":347,"props":3002,"children":3003},{"__ignoreMap":7},[3004],{"type":30,"value":2999},{"type":24,"tag":39,"props":3006,"children":3008},{"id":3007},"_12-向后兼容",[3009],{"type":30,"value":3010},"1.2 向后兼容",{"type":24,"tag":46,"props":3012,"children":3013},{},[3014],{"type":30,"value":3015},"Nuxt 4 提供了兼容性选项，允许继续使用旧目录结构：",{"type":24,"tag":342,"props":3017,"children":3020},{"code":3018,"language":655,"meta":7,"className":3019},"// nuxt.config.ts\nexport default defineNuxtConfig({\n future: {\n compatibilityVersion: 4 // 启用 Nuxt 4 特性\n },\n \n // 如果需要继续使用旧目录结构\n srcDir: './', // 而不是 'app/'\n \n // 或者自定义目录\n dir: {\n app: 'src',\n pages: 'src/pages',\n layouts: 'src/layouts'\n }\n});\n",[657],[3021],{"type":24,"tag":347,"props":3022,"children":3023},{"__ignoreMap":7},[3024],{"type":30,"value":3018},{"type":24,"tag":39,"props":3026,"children":3028},{"id":3027},"_13-appconfigts-变化",[3029],{"type":30,"value":3030},"1.3 app.config.ts 变化",{"type":24,"tag":342,"props":3032,"children":3035},{"code":3033,"language":655,"meta":7,"className":3034},"// Nuxt 3: app.config.ts 在项目根目录\n// Nuxt 4: app.config.ts 移入 app/ 目录\n\n// app/app.config.ts\nexport default defineAppConfig({\n ui: {\n primary: 'green',\n gray: 'slate'\n },\n \n // 类型安全的应用配置\n meta: {\n name: 'My App',\n description: 'A Nuxt 4 Application'\n }\n});\n\n// 使用方式不变\nconst appConfig = useAppConfig();\nconsole.log(appConfig.ui.primary); // 'green'\n",[657],[3036],{"type":24,"tag":347,"props":3037,"children":3038},{"__ignoreMap":7},[3039],{"type":30,"value":3033},{"type":24,"tag":25,"props":3041,"children":3043},{"id":3042},"第二部分nitro-20-引擎升级",[3044],{"type":30,"value":3045},"第二部分：Nitro 2.0 引擎升级",{"type":24,"tag":39,"props":3047,"children":3049},{"id":3048},"_21-性能提升",[3050],{"type":30,"value":3051},"2.1 性能提升",{"type":24,"tag":46,"props":3053,"children":3054},{},[3055],{"type":30,"value":3056},"Nitro 2.0 带来了显著的性能改进：",{"type":24,"tag":342,"props":3058,"children":3061},{"code":3059,"language":655,"meta":7,"className":3060},"// 冷启动时间优化\n// Nitro 1.x: ~150ms\n// Nitro 2.0: ~80ms (约 47% 提升)\n\n// 内存占用优化\n// 同样的应用，内存占用减少约 20%\n\n// 原因：\n// - 更高效的模块加载\n// - 优化的树摇（tree-shaking）\n// - 减少运行时开销\n",[657],[3062],{"type":24,"tag":347,"props":3063,"children":3064},{"__ignoreMap":7},[3065],{"type":30,"value":3059},{"type":24,"tag":39,"props":3067,"children":3069},{"id":3068},"_22-新的路由系统",[3070],{"type":30,"value":3071},"2.2 新的路由系统",{"type":24,"tag":342,"props":3073,"children":3076},{"code":3074,"language":655,"meta":7,"className":3075},"// server/routes/api/[...slug].ts\n\n// Nitro 2.0 新的路由定义方式\nexport default defineEventHandler({\n // 路由级别配置\n config: {\n // 缓存配置\n cache: {\n maxAge: 60,\n staleMaxAge: 3600,\n swr: true\n },\n \n // CORS 配置\n cors: {\n origin: ['https://example.com'],\n methods: ['GET', 'POST']\n }\n },\n \n // 处理函数\n handler: async (event) => {\n const slug = event.context.params?.slug;\n return { data: await fetchData(slug) };\n }\n});\n\n// 支持中间件链\nexport default defineEventHandler({\n onRequest: [authMiddleware, rateLimitMiddleware],\n onBeforeResponse: [logMiddleware],\n \n handler: (event) => {\n return { message: 'Hello' };\n }\n});\n",[657],[3077],{"type":24,"tag":347,"props":3078,"children":3079},{"__ignoreMap":7},[3080],{"type":30,"value":3074},{"type":24,"tag":39,"props":3082,"children":3084},{"id":3083},"_23-增强的数据获取",[3085],{"type":30,"value":3086},"2.3 增强的数据获取",{"type":24,"tag":342,"props":3088,"children":3091},{"code":3089,"language":655,"meta":7,"className":3090},"// Nitro 2.0 改进的 $fetch\n\n// 自动请求去重\nconst [user, posts] = await Promise.all([\n $fetch('/api/user/1'),\n $fetch('/api/user/1') // 相同请求自动去重\n]);\n\n// 请求拦截器\nexport default defineNuxtPlugin(() => {\n const { $fetch } = useNuxtApp();\n \n // 全局请求配置\n globalThis.$fetch = $fetch.create({\n onRequest({ request, options }) {\n options.headers = {\n ...options.headers,\n Authorization: `Bearer ${getToken()}`\n };\n },\n \n onResponseError({ response }) {\n if (response.status === 401) {\n navigateTo('/login');\n }\n }\n });\n});\n",[657],[3092],{"type":24,"tag":347,"props":3093,"children":3094},{"__ignoreMap":7},[3095],{"type":30,"value":3089},{"type":24,"tag":25,"props":3097,"children":3099},{"id":3098},"第三部分兼容性层变化",[3100],{"type":30,"value":3101},"第三部分：兼容性层变化",{"type":24,"tag":39,"props":3103,"children":3105},{"id":3104},"_31-移除的废弃-api",[3106],{"type":30,"value":3107},"3.1 移除的废弃 API",{"type":24,"tag":342,"props":3109,"children":3112},{"code":3110,"language":655,"meta":7,"className":3111},"// Nuxt 4 移除了 Nuxt 3 中标记为废弃的 API\n\n// ❌ 已移除\nimport { defineNuxtRouteMiddleware } from '#app'\n\n// ✅ 使用新的 API\nimport { defineNuxtRouteMiddleware } from 'nuxt/app'\n\n// ❌ 已移除\nconst nuxtApp = useNuxtApp()\nnuxtApp.$router // 不再有 $ 前缀\n\n// ✅ 使用 composables\nconst router = useRouter()\n\n// ❌ 已移除\nuseAsyncData('key', () => fetch(), { lazy: true })\n\n// ✅ 使用 useLazyAsyncData\nuseLazyAsyncData('key', () => fetch())\n",[657],[3113],{"type":24,"tag":347,"props":3114,"children":3115},{"__ignoreMap":7},[3116],{"type":30,"value":3110},{"type":24,"tag":39,"props":3118,"children":3120},{"id":3119},"_32-类型系统改进",[3121],{"type":30,"value":3122},"3.2 类型系统改进",{"type":24,"tag":342,"props":3124,"children":3127},{"code":3125,"language":655,"meta":7,"className":3126},"// Nuxt 4 增强的类型推导\n\n// 页面元数据类型\n// pages/dashboard.vue\n\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n // 类型自动推导，IDE 自动补全\n layout: 'admin', // 只能填已定义的布局\n middleware: ['auth'], // 只能填已定义的中间件\n \n // 自定义元数据\n title: '仪表盘',\n requiresAuth: true\n});\n\u003C/script>\n\n// 路由参数类型\n// pages/users/[id].vue\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute('users-id');\n// ^? RouteLocationNormalized\u003C'users-id'>\n\nroute.params.id // 类型: string\n\u003C/script>\n\n// 运行时配置类型\n// nuxt.config.ts\nexport default defineNuxtConfig({\n runtimeConfig: {\n // 私有配置（仅服务端）\n apiSecret: '',\n \n // 公开配置\n public: {\n apiBase: ''\n }\n }\n});\n\n// 使用时自动推导类型\nconst config = useRuntimeConfig();\nconfig.apiSecret; // 服务端可用\nconfig.public.apiBase; // 客户端可用\n",[657],[3128],{"type":24,"tag":347,"props":3129,"children":3130},{"__ignoreMap":7},[3131],{"type":30,"value":3125},{"type":24,"tag":39,"props":3133,"children":3135},{"id":3134},"_33-useasyncdata-改进",[3136],{"type":30,"value":3137},"3.3 useAsyncData 改进",{"type":24,"tag":342,"props":3139,"children":3142},{"code":3140,"language":655,"meta":7,"className":3141},"// Nuxt 4 中 useAsyncData 的改进\n\n// 改进 1：更好的错误处理\nconst { data, error, status } = await useAsyncData('users', () => $fetch('/api/users'));\n\n// status 新增更多状态\n// 'idle' | 'pending' | 'success' | 'error'\n\n// 改进 2：简化的刷新机制\nconst { refresh, clear } = await useAsyncData('users', () => $fetch('/api/users'));\n\n// 带参数刷新\nawait refresh({ dedupe: true });\n\n// 清除缓存\nclear();\n\n// 改进 3：深度响应式默认关闭\nconst { data } = await useAsyncData('config', () => $fetch('/api/config'), {\n deep: false // 默认 false，提升性能\n});\n\n// 需要深度响应式时显式开启\nconst { data } = await useAsyncData('form', () => $fetch('/api/form'), {\n deep: true\n});\n",[657],[3143],{"type":24,"tag":347,"props":3144,"children":3145},{"__ignoreMap":7},[3146],{"type":30,"value":3140},{"type":24,"tag":25,"props":3148,"children":3150},{"id":3149},"第四部分开发体验改进",[3151],{"type":30,"value":3152},"第四部分：开发体验改进",{"type":24,"tag":39,"props":3154,"children":3156},{"id":3155},"_41-nuxt-devtools-增强",[3157],{"type":30,"value":3158},"4.1 Nuxt DevTools 增强",{"type":24,"tag":342,"props":3160,"children":3163},{"code":3161,"language":655,"meta":7,"className":3162},"// Nuxt 4 内置增强版 DevTools\n\n// 新功能：\n// 1. 组件性能分析\n// - 渲染时间追踪\n// - 不必要渲染检测\n// - 内存使用监控\n\n// 2. 数据流可视化\n// - useAsyncData 调用时序图\n// - 数据缓存状态\n// - 请求去重可视化\n\n// 3. 路由调试\n// - 路由匹配过程\n// - 中间件执行顺序\n// - 导航守卫状态\n\n// 启用高级功能\nexport default defineNuxtConfig({\n devtools: {\n enabled: true,\n \n // 新选项\n timeline: {\n enabled: true // 启用时间线\n }\n }\n});\n",[657],[3164],{"type":24,"tag":347,"props":3165,"children":3166},{"__ignoreMap":7},[3167],{"type":30,"value":3161},{"type":24,"tag":39,"props":3169,"children":3171},{"id":3170},"_42-热更新优化",[3172],{"type":30,"value":3173},"4.2 热更新优化",{"type":24,"tag":342,"props":3175,"children":3178},{"code":3176,"language":655,"meta":7,"className":3177},"// Nuxt 4 大幅改进了热更新体验\n\n// 1. 更快的 HMR\n// - 组件变更：\u003C 100ms\n// - 页面变更：\u003C 200ms\n// - 配置变更：\u003C 1s\n\n// 2. 保持状态的更新\n// composables 更新不再丢失组件状态\nconst count = ref(0); // 更新文件后，值保持\n\n// 3. 错误恢复\n// 修复语法错误后自动恢复，无需重启\n",[657],[3179],{"type":24,"tag":347,"props":3180,"children":3181},{"__ignoreMap":7},[3182],{"type":30,"value":3176},{"type":24,"tag":39,"props":3184,"children":3186},{"id":3185},"_43-错误处理增强",[3187],{"type":30,"value":3188},"4.3 错误处理增强",{"type":24,"tag":342,"props":3190,"children":3193},{"code":3191,"language":724,"meta":7,"className":3192},"\u003C!-- app/error.vue - 增强的错误页面 -->\n\u003Ctemplate>\n \u003Cdiv class=\"error-page\">\n \u003Ch1>{{ error.statusCode }}\u003C/h1>\n \u003Cp>{{ error.message }}\u003C/p>\n \n \u003C!-- Nuxt 4 新增：错误堆栈（开发环境） -->\n \u003Cpre v-if=\"isDev && error.stack\">{{ error.stack }}\u003C/pre>\n \n \u003C!-- 新增：错误上下文 -->\n \u003Cdetails v-if=\"error.data\">\n \u003Csummary>详细信息\u003C/summary>\n \u003Cpre>{{ error.data }}\u003C/pre>\n \u003C/details>\n \n \u003Cbutton @click=\"handleError\">重试\u003C/button>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n error: {\n statusCode: number\n message: string\n stack?: string\n data?: Record\u003Cstring, unknown>\n }\n}>();\n\nconst isDev = process.dev;\n\nfunction handleError() {\n clearError({ redirect: '/' });\n}\n\u003C/script>\n",[726],[3194],{"type":24,"tag":347,"props":3195,"children":3196},{"__ignoreMap":7},[3197],{"type":30,"value":3191},{"type":24,"tag":342,"props":3199,"children":3202},{"code":3200,"language":655,"meta":7,"className":3201},"// server/api/users.ts - 增强的服务端错误\n\nexport default defineEventHandler((event) => {\n const id = getRouterParam(event, 'id');\n \n if (!id) {\n throw createError({\n statusCode: 400,\n message: '缺少用户 ID',\n \n // Nuxt 4 新增：结构化错误数据\n data: {\n field: 'id',\n constraint: 'required'\n }\n });\n }\n \n // 业务错误\n throw createError({\n statusCode: 404,\n message: '用户不存在',\n data: {\n userId: id,\n suggestion: '请检查用户 ID 是否正确'\n }\n });\n});\n",[657],[3203],{"type":24,"tag":347,"props":3204,"children":3205},{"__ignoreMap":7},[3206],{"type":30,"value":3200},{"type":24,"tag":25,"props":3208,"children":3210},{"id":3209},"第五部分性能优化特性",[3211],{"type":30,"value":3212},"第五部分：性能优化特性",{"type":24,"tag":39,"props":3214,"children":3216},{"id":3215},"_51-更智能的代码分割",[3217],{"type":30,"value":3218},"5.1 更智能的代码分割",{"type":24,"tag":342,"props":3220,"children":3223},{"code":3221,"language":655,"meta":7,"className":3222},"// Nuxt 4 的自动代码分割更加智能\n\n// 自动路由分割\n// pages/dashboard/\n// index.vue -> chunks/dashboard.js\n// settings.vue -> chunks/dashboard-settings.js\n// analytics.vue -> chunks/dashboard-analytics.js\n\n// 组件级分割\n// components/\n// HeavyChart.vue -> chunks/heavy-chart.js (自动延迟加载)\n\n// 手动优化\nexport default defineNuxtConfig({\n vite: {\n build: {\n rollupOptions: {\n output: {\n // 自定义分块策略\n manualChunks: {\n 'vendor-vue': ['vue', 'vue-router', 'pinia'],\n 'vendor-ui': ['element-plus']\n }\n }\n }\n }\n }\n});\n",[657],[3224],{"type":24,"tag":347,"props":3225,"children":3226},{"__ignoreMap":7},[3227],{"type":30,"value":3221},{"type":24,"tag":39,"props":3229,"children":3231},{"id":3230},"_52-图片优化增强",[3232],{"type":30,"value":3233},"5.2 图片优化增强",{"type":24,"tag":342,"props":3235,"children":3238},{"code":3236,"language":724,"meta":7,"className":3237},"\u003C!-- Nuxt 4 的 nuxt-img 增强 -->\n\u003Ctemplate>\n \u003CNuxtImg\n src=\"/images/hero.jpg\"\n \n \u003C!-- 新增：自动格式选择 -->\n format=\"webp,avif\"\n \n \u003C!-- 新增：艺术指导响应式 -->\n :sources=\"[\n { media: '(max-width: 640px)', src: '/images/hero-mobile.jpg' },\n { media: '(max-width: 1024px)', src: '/images/hero-tablet.jpg' }\n ]\"\n \n \u003C!-- 新增：模糊占位符 -->\n placeholder=\"/images/hero-blur.jpg\"\n \n \u003C!-- 新增：性能提示 -->\n :priority=\"true\"\n fetchpriority=\"high\"\n />\n\u003C/template>\n\n\u003Cscript setup>\n// 编程式使用\nconst img = useImage();\n\n// 生成优化后的 URL\nconst optimizedUrl = img('/images/photo.jpg', {\n width: 800,\n height: 600,\n format: 'webp',\n quality: 80\n});\n\u003C/script>\n",[726],[3239],{"type":24,"tag":347,"props":3240,"children":3241},{"__ignoreMap":7},[3242],{"type":30,"value":3236},{"type":24,"tag":39,"props":3244,"children":3246},{"id":3245},"_53-服务端渲染优化",[3247],{"type":30,"value":3248},"5.3 服务端渲染优化",{"type":24,"tag":342,"props":3250,"children":3253},{"code":3251,"language":655,"meta":7,"className":3252},"// Nuxt 4 SSR 性能优化\n\n// 1. 流式 SSR\n// nuxt.config.ts\nexport default defineNuxtConfig({\n nitro: {\n // 启用流式 SSR\n experimental: {\n wasm: true\n }\n },\n \n // 组件流式渲染\n experimental: {\n componentIslands: true, // 组件岛\n payloadExtraction: true // Payload 提取\n }\n});\n\n// 2. 选择性 Hydration\n// pages/article/[id].vue\n\u003Ctemplate>\n \u003Carticle>\n \u003C!-- 静态内容，不需要 hydration -->\n \u003CNuxtIsland name=\"ArticleContent\" :props=\"{ content }\" />\n \n \u003C!-- 需要交互的部分 -->\n \u003CCommentSection :articleId=\"id\" />\n \u003C/article>\n\u003C/template>\n\n// 3. 预加载优化\n\u003Cscript setup>\n// 智能预加载\nconst { data } = await useAsyncData('article', () => $fetch('/api/article/' + id), {\n // 预加载相关数据\n preload: [\n () => $fetch('/api/comments/' + id),\n () => $fetch('/api/related/' + id)\n ]\n});\n\u003C/script>\n",[657],[3254],{"type":24,"tag":347,"props":3255,"children":3256},{"__ignoreMap":7},[3257],{"type":30,"value":3251},{"type":24,"tag":25,"props":3259,"children":3261},{"id":3260},"第六部分模块生态更新",[3262],{"type":30,"value":3263},"第六部分：模块生态更新",{"type":24,"tag":39,"props":3265,"children":3267},{"id":3266},"_61-官方模块适配",[3268],{"type":30,"value":3269},"6.1 官方模块适配",{"type":24,"tag":342,"props":3271,"children":3274},{"code":3272,"language":655,"meta":7,"className":3273},"// 主要官方模块的 Nuxt 4 兼容版本\n\n// @nuxtjs/i18n v9\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/i18n'],\n \n i18n: {\n // 新增：编译时优化\n bundle: {\n optimizeTranslations: true\n },\n \n // 新增：类型生成\n types: 'composition'\n }\n});\n\n// @nuxt/content v3\nexport default defineNuxtConfig({\n modules: ['@nuxt/content'],\n \n content: {\n // 新增：更强的查询 API\n experimental: {\n clientDB: true,\n stripQueryParameters: true\n }\n }\n});\n\n// @pinia/nuxt v0.6\nexport default defineNuxtConfig({\n modules: ['@pinia/nuxt'],\n \n pinia: {\n // 新增：自动导入优化\n storesDirs: ['./stores/**']\n }\n});\n",[657],[3275],{"type":24,"tag":347,"props":3276,"children":3277},{"__ignoreMap":7},[3278],{"type":30,"value":3272},{"type":24,"tag":39,"props":3280,"children":3282},{"id":3281},"_62-创建-nuxt-4-兼容模块",[3283],{"type":30,"value":3284},"6.2 创建 Nuxt 4 兼容模块",{"type":24,"tag":342,"props":3286,"children":3289},{"code":3287,"language":655,"meta":7,"className":3288},"// 模块开发的新约定\n\n// my-module/src/module.ts\nimport { defineNuxtModule, createResolver } from '@nuxt/kit'\n\nexport default defineNuxtModule({\n meta: {\n name: 'my-module',\n configKey: 'myModule',\n \n // Nuxt 4 要求\n compatibility: {\n nuxt: '^4.0.0'\n }\n },\n \n defaults: {\n enabled: true\n },\n \n setup(options, nuxt) {\n const resolver = createResolver(import.meta.url);\n \n // 使用新的 hook API\n nuxt.hook('app:resolve', (app) => {\n // app 配置\n });\n \n // 添加运行时插件\n addPlugin(resolver.resolve('./runtime/plugin'));\n \n // 添加组件\n addComponentsDir({\n path: resolver.resolve('./runtime/components'),\n prefix: 'MyModule'\n });\n }\n});\n",[657],[3290],{"type":24,"tag":347,"props":3291,"children":3292},{"__ignoreMap":7},[3293],{"type":30,"value":3287},{"type":24,"tag":25,"props":3295,"children":3297},{"id":3296},"第七部分迁移准备",[3298],{"type":30,"value":3299},"第七部分：迁移准备",{"type":24,"tag":39,"props":3301,"children":3303},{"id":3302},"_71-兼容性检查清单",[3304],{"type":30,"value":3305},"7.1 兼容性检查清单",{"type":24,"tag":342,"props":3307,"children":3311},{"code":3308,"language":1160,"meta":7,"className":3309},"## Nuxt 4 迁移检查清单\n\n### 依赖版本\n- [ ] Node.js >= 20\n- [ ] Vue >= 3.4\n- [ ] TypeScript >= 5.3（推荐）\n\n### 代码检查\n- [ ] 移除已废弃的 API 调用\n- [ ] 更新 composables 导入路径\n- [ ] 检查 useAsyncData 用法\n- [ ] 审查中间件语法\n\n### 目录结构\n- [ ] 决定是否采用新目录结构\n- [ ] 移动文件到 app/ 目录（如果采用）\n- [ ] 更新 nuxt.config.ts 配置\n\n### 模块更新\n- [ ] 更新官方模块到兼容版本\n- [ ] 检查第三方模块兼容性\n- [ ] 更新自定义模块\n\n### 测试\n- [ ] 运行全部测试套件\n- [ ] 验证 SSR/SSG 输出\n- [ ] 检查 hydration 错误\n- [ ] 性能基准测试\n",[3310],"language-markdown",[3312],{"type":24,"tag":347,"props":3313,"children":3314},{"__ignoreMap":7},[3315],{"type":30,"value":3308},{"type":24,"tag":39,"props":3317,"children":3319},{"id":3318},"_72-渐进式升级路径",[3320],{"type":30,"value":3321},"7.2 渐进式升级路径",{"type":24,"tag":342,"props":3323,"children":3326},{"code":3324,"language":655,"meta":7,"className":3325},"// 使用 compatibilityVersion 实现渐进升级\n\n// 阶段 1：启用 Nuxt 4 特性（保持旧目录结构）\nexport default defineNuxtConfig({\n future: {\n compatibilityVersion: 4\n },\n srcDir: './' // 保持旧目录结构\n});\n\n// 阶段 2：迁移到新目录结构\n// 1. 创建 app/ 目录\n// 2. 移动文件\n// 3. 更新导入路径\n\n// 阶段 3：完全升级\nexport default defineNuxtConfig({\n // 移除 future 配置，默认使用 Nuxt 4 行为\n});\n",[657],[3327],{"type":24,"tag":347,"props":3328,"children":3329},{"__ignoreMap":7},[3330],{"type":30,"value":3324},{"type":24,"tag":25,"props":3332,"children":3334},{"id":3333},"结语稳步前进的进化",[3335],{"type":30,"value":3336},"结语：稳步前进的进化",{"type":24,"tag":46,"props":3338,"children":3339},{},[3340],{"type":30,"value":3341},"Nuxt 4 不是一次颠覆性的重写，而是在 Nuxt 3 坚实基础上的持续改进。新的目录结构带来更好的组织性，Nitro 2.0 带来更好的性能，增强的类型系统带来更好的开发体验。",{"type":24,"tag":46,"props":3343,"children":3344},{},[3345],{"type":30,"value":3346},"对于 Nuxt 3 用户来说，升级路径相对平滑。核心概念没有变化，熟悉的 API 依然工作。Nuxt 团队显然吸取了 Nuxt 2 到 Nuxt 3 升级的经验，这次提供了更友好的迁移体验。",{"type":24,"tag":46,"props":3348,"children":3349},{},[3350],{"type":30,"value":3351},"如果你正在考虑是否升级，建议：",{"type":24,"tag":1065,"props":3353,"children":3354},{},[3355,3360,3365],{"type":24,"tag":67,"props":3356,"children":3357},{},[3358],{"type":30,"value":3359},"新项目直接使用 Nuxt 4",{"type":24,"tag":67,"props":3361,"children":3362},{},[3363],{"type":30,"value":3364},"现有项目评估迁移成本后决定",{"type":24,"tag":67,"props":3366,"children":3367},{},[3368],{"type":30,"value":3369},"关注官方迁移指南的更新",{"type":24,"tag":1274,"props":3371,"children":3372},{},[],{"type":24,"tag":25,"props":3374,"children":3375},{"id":1061},[3376],{"type":30,"value":1061},{"type":24,"tag":1065,"props":3378,"children":3379},{},[3380,3390,3400,3410],{"type":24,"tag":67,"props":3381,"children":3382},{},[3383],{"type":24,"tag":1072,"props":3384,"children":3387},{"href":3385,"rel":3386},"https://nuxt.com/blog/v4",[1076],[3388],{"type":30,"value":3389},"Nuxt 4 官方公告",{"type":24,"tag":67,"props":3391,"children":3392},{},[3393],{"type":24,"tag":1072,"props":3394,"children":3397},{"href":3395,"rel":3396},"https://nuxt.com/docs/migration/upgrade",[1076],[3398],{"type":30,"value":3399},"Nuxt 4 迁移指南",{"type":24,"tag":67,"props":3401,"children":3402},{},[3403],{"type":24,"tag":1072,"props":3404,"children":3407},{"href":3405,"rel":3406},"https://nitro.unjs.io/changelog",[1076],[3408],{"type":30,"value":3409},"Nitro 2.0 更新日志",{"type":24,"tag":67,"props":3411,"children":3412},{},[3413],{"type":24,"tag":1072,"props":3414,"children":3417},{"href":3415,"rel":3416},"https://github.com/nuxt/nuxt/issues",[1076],[3418],{"type":30,"value":3419},"Nuxt 路线图",{"title":7,"searchDepth":1111,"depth":1111,"links":3421},[3422,3423,3424,3429,3434,3439,3444,3449,3453,3457,3458],{"id":2944,"depth":1114,"text":2947},{"id":2950,"depth":1114,"text":2953},{"id":2966,"depth":1114,"text":2969,"children":3425},[3426,3427,3428],{"id":2972,"depth":1111,"text":2975},{"id":3007,"depth":1111,"text":3010},{"id":3027,"depth":1111,"text":3030},{"id":3042,"depth":1114,"text":3045,"children":3430},[3431,3432,3433],{"id":3048,"depth":1111,"text":3051},{"id":3068,"depth":1111,"text":3071},{"id":3083,"depth":1111,"text":3086},{"id":3098,"depth":1114,"text":3101,"children":3435},[3436,3437,3438],{"id":3104,"depth":1111,"text":3107},{"id":3119,"depth":1111,"text":3122},{"id":3134,"depth":1111,"text":3137},{"id":3149,"depth":1114,"text":3152,"children":3440},[3441,3442,3443],{"id":3155,"depth":1111,"text":3158},{"id":3170,"depth":1111,"text":3173},{"id":3185,"depth":1111,"text":3188},{"id":3209,"depth":1114,"text":3212,"children":3445},[3446,3447,3448],{"id":3215,"depth":1111,"text":3218},{"id":3230,"depth":1111,"text":3233},{"id":3245,"depth":1111,"text":3248},{"id":3260,"depth":1114,"text":3263,"children":3450},[3451,3452],{"id":3266,"depth":1111,"text":3269},{"id":3281,"depth":1111,"text":3284},{"id":3296,"depth":1114,"text":3299,"children":3454},[3455,3456],{"id":3302,"depth":1111,"text":3305},{"id":3318,"depth":1111,"text":3321},{"id":3333,"depth":1114,"text":3336},{"id":1061,"depth":1114,"text":1061},"content:topics:nuxt:nuxt4-major-updates-overview.md","topics/nuxt/nuxt4-major-updates-overview.md","topics/nuxt/nuxt4-major-updates-overview",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":3463,"image":17,"featured":18,"readingTime":19,"body":3464,"_type":1160,"_id":1161,"_source":1162,"_file":1163,"_stem":1164,"_extension":1165},[13,14,15,16],{"type":21,"children":3465,"toc":4334},[3466,3470,3474,3478,3482,3490,3533,3537,3541,3655,3659,3663,3706,3710,3714,3721,3725,3729,3737,3744,3752,3759,3763,3767,3775,3785,3789,3797,3801,3805,3813,3821,3829,3837,3841,3845,3849,3857,3864,3872,3879,3887,3894,3898,3902,3909,3913,3917,3944,3948,3952,3960,3964,3972,3976,3980,3988,3992,3996,4004,4012,4016,4020,4028,4032,4040,4044,4052,4056,4060,4064,4072,4076,4084,4088,4092,4096,4104,4108,4116,4120,4124,4132,4140,4148,4152,4160,4168,4176,4184,4188,4202,4216,4224,4232,4236,4240,4291,4295,4299],{"type":24,"tag":25,"props":3467,"children":3468},{"id":27},[3469],{"type":30,"value":31},{"type":24,"tag":25,"props":3471,"children":3472},{"id":34},[3473],{"type":30,"value":37},{"type":24,"tag":39,"props":3475,"children":3476},{"id":41},[3477],{"type":30,"value":44},{"type":24,"tag":46,"props":3479,"children":3480},{},[3481],{"type":30,"value":50},{"type":24,"tag":46,"props":3483,"children":3484},{},[3485,3489],{"type":24,"tag":55,"props":3486,"children":3487},{},[3488],{"type":30,"value":59},{"type":30,"value":61},{"type":24,"tag":63,"props":3491,"children":3492},{},[3493,3501,3509,3517,3525],{"type":24,"tag":67,"props":3494,"children":3495},{},[3496,3500],{"type":24,"tag":55,"props":3497,"children":3498},{},[3499],{"type":30,"value":74},{"type":30,"value":76},{"type":24,"tag":67,"props":3502,"children":3503},{},[3504,3508],{"type":24,"tag":55,"props":3505,"children":3506},{},[3507],{"type":30,"value":84},{"type":30,"value":86},{"type":24,"tag":67,"props":3510,"children":3511},{},[3512,3516],{"type":24,"tag":55,"props":3513,"children":3514},{},[3515],{"type":30,"value":94},{"type":30,"value":96},{"type":24,"tag":67,"props":3518,"children":3519},{},[3520,3524],{"type":24,"tag":55,"props":3521,"children":3522},{},[3523],{"type":30,"value":104},{"type":30,"value":106},{"type":24,"tag":67,"props":3526,"children":3527},{},[3528,3532],{"type":24,"tag":55,"props":3529,"children":3530},{},[3531],{"type":30,"value":114},{"type":30,"value":116},{"type":24,"tag":39,"props":3534,"children":3535},{"id":119},[3536],{"type":30,"value":122},{"type":24,"tag":46,"props":3538,"children":3539},{},[3540],{"type":30,"value":127},{"type":24,"tag":129,"props":3542,"children":3543},{},[3544,3562],{"type":24,"tag":133,"props":3545,"children":3546},{},[3547],{"type":24,"tag":137,"props":3548,"children":3549},{},[3550,3554,3558],{"type":24,"tag":141,"props":3551,"children":3552},{},[3553],{"type":30,"value":145},{"type":24,"tag":141,"props":3555,"children":3556},{},[3557],{"type":30,"value":14},{"type":24,"tag":141,"props":3559,"children":3560},{},[3561],{"type":30,"value":154},{"type":24,"tag":156,"props":3563,"children":3564},{},[3565,3580,3595,3610,3625,3640],{"type":24,"tag":137,"props":3566,"children":3567},{},[3568,3572,3576],{"type":24,"tag":163,"props":3569,"children":3570},{},[3571],{"type":30,"value":167},{"type":24,"tag":163,"props":3573,"children":3574},{},[3575],{"type":30,"value":172},{"type":24,"tag":163,"props":3577,"children":3578},{},[3579],{"type":30,"value":177},{"type":24,"tag":137,"props":3581,"children":3582},{},[3583,3587,3591],{"type":24,"tag":163,"props":3584,"children":3585},{},[3586],{"type":30,"value":185},{"type":24,"tag":163,"props":3588,"children":3589},{},[3590],{"type":30,"value":190},{"type":24,"tag":163,"props":3592,"children":3593},{},[3594],{"type":30,"value":195},{"type":24,"tag":137,"props":3596,"children":3597},{},[3598,3602,3606],{"type":24,"tag":163,"props":3599,"children":3600},{},[3601],{"type":30,"value":203},{"type":24,"tag":163,"props":3603,"children":3604},{},[3605],{"type":30,"value":208},{"type":24,"tag":163,"props":3607,"children":3608},{},[3609],{"type":30,"value":213},{"type":24,"tag":137,"props":3611,"children":3612},{},[3613,3617,3621],{"type":24,"tag":163,"props":3614,"children":3615},{},[3616],{"type":30,"value":221},{"type":24,"tag":163,"props":3618,"children":3619},{},[3620],{"type":30,"value":226},{"type":24,"tag":163,"props":3622,"children":3623},{},[3624],{"type":30,"value":231},{"type":24,"tag":137,"props":3626,"children":3627},{},[3628,3632,3636],{"type":24,"tag":163,"props":3629,"children":3630},{},[3631],{"type":30,"value":239},{"type":24,"tag":163,"props":3633,"children":3634},{},[3635],{"type":30,"value":244},{"type":24,"tag":163,"props":3637,"children":3638},{},[3639],{"type":30,"value":249},{"type":24,"tag":137,"props":3641,"children":3642},{},[3643,3647,3651],{"type":24,"tag":163,"props":3644,"children":3645},{},[3646],{"type":30,"value":257},{"type":24,"tag":163,"props":3648,"children":3649},{},[3650],{"type":30,"value":262},{"type":24,"tag":163,"props":3652,"children":3653},{},[3654],{"type":30,"value":231},{"type":24,"tag":39,"props":3656,"children":3657},{"id":269},[3658],{"type":30,"value":272},{"type":24,"tag":46,"props":3660,"children":3661},{},[3662],{"type":30,"value":277},{"type":24,"tag":63,"props":3664,"children":3665},{},[3666,3674,3682,3690,3698],{"type":24,"tag":67,"props":3667,"children":3668},{},[3669,3673],{"type":24,"tag":55,"props":3670,"children":3671},{},[3672],{"type":30,"value":288},{"type":30,"value":290},{"type":24,"tag":67,"props":3675,"children":3676},{},[3677,3681],{"type":24,"tag":55,"props":3678,"children":3679},{},[3680],{"type":30,"value":298},{"type":30,"value":300},{"type":24,"tag":67,"props":3683,"children":3684},{},[3685,3689],{"type":24,"tag":55,"props":3686,"children":3687},{},[3688],{"type":30,"value":308},{"type":30,"value":310},{"type":24,"tag":67,"props":3691,"children":3692},{},[3693,3697],{"type":24,"tag":55,"props":3694,"children":3695},{},[3696],{"type":30,"value":318},{"type":30,"value":320},{"type":24,"tag":67,"props":3699,"children":3700},{},[3701,3705],{"type":24,"tag":55,"props":3702,"children":3703},{},[3704],{"type":30,"value":328},{"type":30,"value":330},{"type":24,"tag":25,"props":3707,"children":3708},{"id":333},[3709],{"type":30,"value":333},{"type":24,"tag":39,"props":3711,"children":3712},{"id":338},[3713],{"type":30,"value":338},{"type":24,"tag":342,"props":3715,"children":3716},{"code":344},[3717],{"type":24,"tag":347,"props":3718,"children":3719},{"__ignoreMap":7},[3720],{"type":30,"value":344},{"type":24,"tag":39,"props":3722,"children":3723},{"id":353},[3724],{"type":30,"value":353},{"type":24,"tag":46,"props":3726,"children":3727},{},[3728],{"type":30,"value":360},{"type":24,"tag":46,"props":3730,"children":3731},{},[3732,3736],{"type":24,"tag":55,"props":3733,"children":3734},{},[3735],{"type":30,"value":368},{"type":30,"value":61},{"type":24,"tag":342,"props":3738,"children":3739},{"code":372},[3740],{"type":24,"tag":347,"props":3741,"children":3742},{"__ignoreMap":7},[3743],{"type":30,"value":372},{"type":24,"tag":46,"props":3745,"children":3746},{},[3747,3751],{"type":24,"tag":55,"props":3748,"children":3749},{},[3750],{"type":30,"value":385},{"type":30,"value":61},{"type":24,"tag":342,"props":3753,"children":3754},{"code":389},[3755],{"type":24,"tag":347,"props":3756,"children":3757},{"__ignoreMap":7},[3758],{"type":30,"value":389},{"type":24,"tag":25,"props":3760,"children":3761},{"id":397},[3762],{"type":30,"value":397},{"type":24,"tag":39,"props":3764,"children":3765},{"id":402},[3766],{"type":30,"value":405},{"type":24,"tag":342,"props":3768,"children":3770},{"code":408,"language":409,"meta":7,"className":3769},[411],[3771],{"type":24,"tag":347,"props":3772,"children":3773},{"__ignoreMap":7},[3774],{"type":30,"value":408},{"type":24,"tag":46,"props":3776,"children":3777},{},[3778,3779,3784],{"type":30,"value":421},{"type":24,"tag":347,"props":3780,"children":3782},{"className":3781},[],[3783],{"type":30,"value":427},{"type":30,"value":429},{"type":24,"tag":39,"props":3786,"children":3787},{"id":432},[3788],{"type":30,"value":435},{"type":24,"tag":342,"props":3790,"children":3792},{"code":438,"language":409,"meta":7,"className":3791},[411],[3793],{"type":24,"tag":347,"props":3794,"children":3795},{"__ignoreMap":7},[3796],{"type":30,"value":438},{"type":24,"tag":39,"props":3798,"children":3799},{"id":447},[3800],{"type":30,"value":450},{"type":24,"tag":46,"props":3802,"children":3803},{},[3804],{"type":30,"value":455},{"type":24,"tag":46,"props":3806,"children":3807},{},[3808,3812],{"type":24,"tag":55,"props":3809,"children":3810},{},[3811],{"type":30,"value":463},{"type":30,"value":61},{"type":24,"tag":342,"props":3814,"children":3816},{"code":467,"language":468,"meta":7,"className":3815},[470],[3817],{"type":24,"tag":347,"props":3818,"children":3819},{"__ignoreMap":7},[3820],{"type":30,"value":467},{"type":24,"tag":46,"props":3822,"children":3823},{},[3824,3828],{"type":24,"tag":55,"props":3825,"children":3826},{},[3827],{"type":30,"value":483},{"type":30,"value":61},{"type":24,"tag":342,"props":3830,"children":3832},{"code":487,"language":468,"meta":7,"className":3831},[470],[3833],{"type":24,"tag":347,"props":3834,"children":3835},{"__ignoreMap":7},[3836],{"type":30,"value":487},{"type":24,"tag":25,"props":3838,"children":3839},{"id":496},[3840],{"type":30,"value":496},{"type":24,"tag":39,"props":3842,"children":3843},{"id":501},[3844],{"type":30,"value":504},{"type":24,"tag":46,"props":3846,"children":3847},{},[3848],{"type":30,"value":509},{"type":24,"tag":46,"props":3850,"children":3851},{},[3852,3856],{"type":24,"tag":55,"props":3853,"children":3854},{},[3855],{"type":30,"value":517},{"type":30,"value":61},{"type":24,"tag":342,"props":3858,"children":3859},{"code":521},[3860],{"type":24,"tag":347,"props":3861,"children":3862},{"__ignoreMap":7},[3863],{"type":30,"value":521},{"type":24,"tag":46,"props":3865,"children":3866},{},[3867,3871],{"type":24,"tag":55,"props":3868,"children":3869},{},[3870],{"type":30,"value":534},{"type":30,"value":61},{"type":24,"tag":342,"props":3873,"children":3874},{"code":538},[3875],{"type":24,"tag":347,"props":3876,"children":3877},{"__ignoreMap":7},[3878],{"type":30,"value":538},{"type":24,"tag":46,"props":3880,"children":3881},{},[3882,3886],{"type":24,"tag":55,"props":3883,"children":3884},{},[3885],{"type":30,"value":551},{"type":30,"value":61},{"type":24,"tag":342,"props":3888,"children":3889},{"code":555},[3890],{"type":24,"tag":347,"props":3891,"children":3892},{"__ignoreMap":7},[3893],{"type":30,"value":555},{"type":24,"tag":39,"props":3895,"children":3896},{"id":563},[3897],{"type":30,"value":566},{"type":24,"tag":46,"props":3899,"children":3900},{},[3901],{"type":30,"value":571},{"type":24,"tag":342,"props":3903,"children":3904},{"code":574},[3905],{"type":24,"tag":347,"props":3906,"children":3907},{"__ignoreMap":7},[3908],{"type":30,"value":574},{"type":24,"tag":39,"props":3910,"children":3911},{"id":582},[3912],{"type":30,"value":585},{"type":24,"tag":46,"props":3914,"children":3915},{},[3916],{"type":30,"value":590},{"type":24,"tag":63,"props":3918,"children":3919},{},[3920,3924,3940],{"type":24,"tag":67,"props":3921,"children":3922},{},[3923],{"type":30,"value":598},{"type":24,"tag":67,"props":3925,"children":3926},{},[3927,3928,3933,3934,3939],{"type":30,"value":603},{"type":24,"tag":347,"props":3929,"children":3931},{"className":3930},[],[3932],{"type":30,"value":609},{"type":30,"value":611},{"type":24,"tag":347,"props":3935,"children":3937},{"className":3936},[],[3938],{"type":30,"value":617},{"type":30,"value":619},{"type":24,"tag":67,"props":3941,"children":3942},{},[3943],{"type":30,"value":624},{"type":24,"tag":25,"props":3945,"children":3946},{"id":627},[3947],{"type":30,"value":630},{"type":24,"tag":39,"props":3949,"children":3950},{"id":633},[3951],{"type":30,"value":636},{"type":24,"tag":342,"props":3953,"children":3955},{"code":639,"language":409,"meta":7,"className":3954},[411],[3956],{"type":24,"tag":347,"props":3957,"children":3958},{"__ignoreMap":7},[3959],{"type":30,"value":639},{"type":24,"tag":39,"props":3961,"children":3962},{"id":648},[3963],{"type":30,"value":651},{"type":24,"tag":342,"props":3965,"children":3967},{"code":654,"language":655,"meta":7,"className":3966},[657],[3968],{"type":24,"tag":347,"props":3969,"children":3970},{"__ignoreMap":7},[3971],{"type":30,"value":654},{"type":24,"tag":39,"props":3973,"children":3974},{"id":665},[3975],{"type":30,"value":665},{"type":24,"tag":46,"props":3977,"children":3978},{},[3979],{"type":30,"value":672},{"type":24,"tag":342,"props":3981,"children":3983},{"code":675,"language":655,"meta":7,"className":3982},[657],[3984],{"type":24,"tag":347,"props":3985,"children":3986},{"__ignoreMap":7},[3987],{"type":30,"value":675},{"type":24,"tag":39,"props":3989,"children":3990},{"id":684},[3991],{"type":30,"value":687},{"type":24,"tag":46,"props":3993,"children":3994},{},[3995],{"type":30,"value":692},{"type":24,"tag":342,"props":3997,"children":3999},{"code":695,"language":655,"meta":7,"className":3998},[657],[4000],{"type":24,"tag":347,"props":4001,"children":4002},{"__ignoreMap":7},[4003],{"type":30,"value":695},{"type":24,"tag":342,"props":4005,"children":4007},{"code":704,"language":655,"meta":7,"className":4006},[657],[4008],{"type":24,"tag":347,"props":4009,"children":4010},{"__ignoreMap":7},[4011],{"type":30,"value":704},{"type":24,"tag":25,"props":4013,"children":4014},{"id":713},[4015],{"type":30,"value":713},{"type":24,"tag":39,"props":4017,"children":4018},{"id":718},[4019],{"type":30,"value":718},{"type":24,"tag":342,"props":4021,"children":4023},{"code":723,"language":724,"meta":7,"className":4022},[726],[4024],{"type":24,"tag":347,"props":4025,"children":4026},{"__ignoreMap":7},[4027],{"type":30,"value":723},{"type":24,"tag":39,"props":4029,"children":4030},{"id":734},[4031],{"type":30,"value":734},{"type":24,"tag":342,"props":4033,"children":4035},{"code":739,"language":724,"meta":7,"className":4034},[726],[4036],{"type":24,"tag":347,"props":4037,"children":4038},{"__ignoreMap":7},[4039],{"type":30,"value":739},{"type":24,"tag":39,"props":4041,"children":4042},{"id":748},[4043],{"type":30,"value":748},{"type":24,"tag":342,"props":4045,"children":4047},{"code":753,"language":724,"meta":7,"className":4046},[726],[4048],{"type":24,"tag":347,"props":4049,"children":4050},{"__ignoreMap":7},[4051],{"type":30,"value":753},{"type":24,"tag":25,"props":4053,"children":4054},{"id":762},[4055],{"type":30,"value":762},{"type":24,"tag":46,"props":4057,"children":4058},{},[4059],{"type":30,"value":769},{"type":24,"tag":39,"props":4061,"children":4062},{"id":772},[4063],{"type":30,"value":775},{"type":24,"tag":342,"props":4065,"children":4067},{"code":778,"language":655,"meta":7,"className":4066},[657],[4068],{"type":24,"tag":347,"props":4069,"children":4070},{"__ignoreMap":7},[4071],{"type":30,"value":778},{"type":24,"tag":39,"props":4073,"children":4074},{"id":787},[4075],{"type":30,"value":787},{"type":24,"tag":342,"props":4077,"children":4079},{"code":792,"language":724,"meta":7,"className":4078},[726],[4080],{"type":24,"tag":347,"props":4081,"children":4082},{"__ignoreMap":7},[4083],{"type":30,"value":792},{"type":24,"tag":25,"props":4085,"children":4086},{"id":801},[4087],{"type":30,"value":801},{"type":24,"tag":46,"props":4089,"children":4090},{},[4091],{"type":30,"value":808},{"type":24,"tag":39,"props":4093,"children":4094},{"id":811},[4095],{"type":30,"value":814},{"type":24,"tag":342,"props":4097,"children":4099},{"code":817,"language":655,"meta":7,"className":4098},[657],[4100],{"type":24,"tag":347,"props":4101,"children":4102},{"__ignoreMap":7},[4103],{"type":30,"value":817},{"type":24,"tag":39,"props":4105,"children":4106},{"id":826},[4107],{"type":30,"value":826},{"type":24,"tag":342,"props":4109,"children":4111},{"code":831,"language":724,"meta":7,"className":4110},[726],[4112],{"type":24,"tag":347,"props":4113,"children":4114},{"__ignoreMap":7},[4115],{"type":30,"value":831},{"type":24,"tag":25,"props":4117,"children":4118},{"id":840},[4119],{"type":30,"value":840},{"type":24,"tag":39,"props":4121,"children":4122},{"id":845},[4123],{"type":30,"value":848},{"type":24,"tag":46,"props":4125,"children":4126},{},[4127,4131],{"type":24,"tag":55,"props":4128,"children":4129},{},[4130],{"type":30,"value":856},{"type":30,"value":61},{"type":24,"tag":342,"props":4133,"children":4135},{"code":860,"language":861,"meta":7,"className":4134},[863],[4136],{"type":24,"tag":347,"props":4137,"children":4138},{"__ignoreMap":7},[4139],{"type":30,"value":860},{"type":24,"tag":342,"props":4141,"children":4143},{"code":871,"language":872,"meta":7,"className":4142},[874],[4144],{"type":24,"tag":347,"props":4145,"children":4146},{"__ignoreMap":7},[4147],{"type":30,"value":871},{"type":24,"tag":39,"props":4149,"children":4150},{"id":882},[4151],{"type":30,"value":885},{"type":24,"tag":46,"props":4153,"children":4154},{},[4155,4159],{"type":24,"tag":55,"props":4156,"children":4157},{},[4158],{"type":30,"value":893},{"type":30,"value":61},{"type":24,"tag":342,"props":4161,"children":4163},{"code":897,"language":409,"meta":7,"className":4162},[411],[4164],{"type":24,"tag":347,"props":4165,"children":4166},{"__ignoreMap":7},[4167],{"type":30,"value":897},{"type":24,"tag":46,"props":4169,"children":4170},{},[4171,4175],{"type":24,"tag":55,"props":4172,"children":4173},{},[4174],{"type":30,"value":911},{"type":30,"value":61},{"type":24,"tag":342,"props":4177,"children":4179},{"code":915,"language":655,"meta":7,"className":4178},[657],[4180],{"type":24,"tag":347,"props":4181,"children":4182},{"__ignoreMap":7},[4183],{"type":30,"value":915},{"type":24,"tag":25,"props":4185,"children":4186},{"id":924},[4187],{"type":30,"value":924},{"type":24,"tag":46,"props":4189,"children":4190},{},[4191,4195,4196,4201],{"type":24,"tag":55,"props":4192,"children":4193},{},[4194],{"type":30,"value":934},{"type":30,"value":936},{"type":24,"tag":347,"props":4197,"children":4199},{"className":4198},[],[4200],{"type":30,"value":942},{"type":30,"value":944},{"type":24,"tag":46,"props":4203,"children":4204},{},[4205,4209,4210,4215],{"type":24,"tag":55,"props":4206,"children":4207},{},[4208],{"type":30,"value":952},{"type":30,"value":954},{"type":24,"tag":347,"props":4211,"children":4213},{"className":4212},[],[4214],{"type":30,"value":960},{"type":30,"value":962},{"type":24,"tag":46,"props":4217,"children":4218},{},[4219,4223],{"type":24,"tag":55,"props":4220,"children":4221},{},[4222],{"type":30,"value":970},{"type":30,"value":972},{"type":24,"tag":46,"props":4225,"children":4226},{},[4227,4231],{"type":24,"tag":55,"props":4228,"children":4229},{},[4230],{"type":30,"value":980},{"type":30,"value":982},{"type":24,"tag":25,"props":4233,"children":4234},{"id":985},[4235],{"type":30,"value":985},{"type":24,"tag":46,"props":4237,"children":4238},{},[4239],{"type":30,"value":992},{"type":24,"tag":63,"props":4241,"children":4242},{},[4243,4251,4259,4267,4275,4283],{"type":24,"tag":67,"props":4244,"children":4245},{},[4246,4250],{"type":24,"tag":55,"props":4247,"children":4248},{},[4249],{"type":30,"value":1003},{"type":30,"value":1005},{"type":24,"tag":67,"props":4252,"children":4253},{},[4254,4258],{"type":24,"tag":55,"props":4255,"children":4256},{},[4257],{"type":30,"value":1013},{"type":30,"value":1015},{"type":24,"tag":67,"props":4260,"children":4261},{},[4262,4266],{"type":24,"tag":55,"props":4263,"children":4264},{},[4265],{"type":30,"value":1023},{"type":30,"value":1025},{"type":24,"tag":67,"props":4268,"children":4269},{},[4270,4274],{"type":24,"tag":55,"props":4271,"children":4272},{},[4273],{"type":30,"value":1033},{"type":30,"value":1035},{"type":24,"tag":67,"props":4276,"children":4277},{},[4278,4282],{"type":24,"tag":55,"props":4279,"children":4280},{},[4281],{"type":30,"value":801},{"type":30,"value":1044},{"type":24,"tag":67,"props":4284,"children":4285},{},[4286,4290],{"type":24,"tag":55,"props":4287,"children":4288},{},[4289],{"type":30,"value":840},{"type":30,"value":1053},{"type":24,"tag":46,"props":4292,"children":4293},{},[4294],{"type":30,"value":1058},{"type":24,"tag":25,"props":4296,"children":4297},{"id":1061},[4298],{"type":30,"value":1061},{"type":24,"tag":1065,"props":4300,"children":4301},{},[4302,4310,4318,4326],{"type":24,"tag":67,"props":4303,"children":4304},{},[4305],{"type":24,"tag":1072,"props":4306,"children":4308},{"href":1074,"rel":4307},[1076],[4309],{"type":30,"value":1079},{"type":24,"tag":67,"props":4311,"children":4312},{},[4313],{"type":24,"tag":1072,"props":4314,"children":4316},{"href":1085,"rel":4315},[1076],[4317],{"type":30,"value":1089},{"type":24,"tag":67,"props":4319,"children":4320},{},[4321],{"type":24,"tag":1072,"props":4322,"children":4324},{"href":1095,"rel":4323},[1076],[4325],{"type":30,"value":1099},{"type":24,"tag":67,"props":4327,"children":4328},{},[4329],{"type":24,"tag":1072,"props":4330,"children":4332},{"href":1105,"rel":4331},[1076],[4333],{"type":30,"value":1109},{"title":7,"searchDepth":1111,"depth":1111,"links":4335},[4336,4337,4342,4346,4351,4356,4362,4367,4371,4375,4379,4380,4381],{"id":27,"depth":1114,"text":31},{"id":34,"depth":1114,"text":37,"children":4338},[4339,4340,4341],{"id":41,"depth":1111,"text":44},{"id":119,"depth":1111,"text":122},{"id":269,"depth":1111,"text":272},{"id":333,"depth":1114,"text":333,"children":4343},[4344,4345],{"id":338,"depth":1111,"text":338},{"id":353,"depth":1111,"text":353},{"id":397,"depth":1114,"text":397,"children":4347},[4348,4349,4350],{"id":402,"depth":1111,"text":405},{"id":432,"depth":1111,"text":435},{"id":447,"depth":1111,"text":450},{"id":496,"depth":1114,"text":496,"children":4352},[4353,4354,4355],{"id":501,"depth":1111,"text":504},{"id":563,"depth":1111,"text":566},{"id":582,"depth":1111,"text":585},{"id":627,"depth":1114,"text":630,"children":4357},[4358,4359,4360,4361],{"id":633,"depth":1111,"text":636},{"id":648,"depth":1111,"text":651},{"id":665,"depth":1111,"text":665},{"id":684,"depth":1111,"text":687},{"id":713,"depth":1114,"text":713,"children":4363},[4364,4365,4366],{"id":718,"depth":1111,"text":718},{"id":734,"depth":1111,"text":734},{"id":748,"depth":1111,"text":748},{"id":762,"depth":1114,"text":762,"children":4368},[4369,4370],{"id":772,"depth":1111,"text":775},{"id":787,"depth":1111,"text":787},{"id":801,"depth":1114,"text":801,"children":4372},[4373,4374],{"id":811,"depth":1111,"text":814},{"id":826,"depth":1111,"text":826},{"id":840,"depth":1114,"text":840,"children":4376},[4377,4378],{"id":845,"depth":1111,"text":848},{"id":882,"depth":1111,"text":885},{"id":924,"depth":1114,"text":924},{"id":985,"depth":1114,"text":985},{"id":1061,"depth":1114,"text":1061},1778574599319]