[{"data":1,"prerenderedAt":3167},["ShallowReactive",2],{"article-/topics/nuxt/nuxt-middleware-route-guard-advanced-patterns":3,"related-nuxt":490,"content-query-YlLmBBxOkz":2800},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":23,"_type":484,"_id":485,"_source":486,"_file":487,"_stem":488,"_extension":489},"/topics/nuxt/nuxt-middleware-route-guard-advanced-patterns","nuxt",false,"","中间件与路由守卫高级技巧：把 Nuxt 权限控制做成稳定规则而不是散装判断","Nuxt 中间件最常见的问题不是不会写，而是越写越分散。本文从导航守卫职责、认证边界、重定向策略和调试方法出发，讲清如何把 Nuxt 中间件治理成稳定规则。","2026-04-30","HTMLPAGE 团队",[13,14,15,16,17],"Nuxt","Middleware","Route Guard","Authentication","Access Control","/images/topics/nuxt/nuxt-middleware-route-guard-advanced-patterns.jpg","developer authentication flow code on laptop screen",226232,"https://www.pexels.com/photo/macbook-air-turned-on-226232/",14,{"type":24,"children":25,"toc":471},"root",[26,34,39,59,64,70,75,80,103,108,113,118,136,141,146,175,180,198,203,215,220,225,230,235,253,258,276,281,286,291,309,314,320,325,348,353,358,363,387,392,397,425,430,435,440],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","Nuxt 项目里的权限问题，很多时候不是认证逻辑本身复杂，而是判断分散得到处都是。",{"type":27,"tag":28,"props":35,"children":36},{},[37],{"type":32,"value":38},"常见现象是：",{"type":27,"tag":40,"props":41,"children":42},"ul",{},[43,49,54],{"type":27,"tag":44,"props":45,"children":46},"li",{},[47],{"type":32,"value":48},"页面里写一次登录判断",{"type":27,"tag":44,"props":50,"children":51},{},[52],{"type":32,"value":53},"中间件里再写一次角色判断",{"type":27,"tag":44,"props":55,"children":56},{},[57],{"type":32,"value":58},"接口请求失败后组件里再补一次跳转",{"type":27,"tag":28,"props":60,"children":61},{},[62],{"type":32,"value":63},"结果就是权限策略没有形成规则，只是在不同文件里重复判断。",{"type":27,"tag":65,"props":66,"children":68},"h2",{"id":67},"先明确中间件到底解决什么问题",[69],{"type":32,"value":67},{"type":27,"tag":28,"props":71,"children":72},{},[73],{"type":32,"value":74},"中间件适合处理的是“路由进入前的统一决策”，而不是所有业务分支。",{"type":27,"tag":28,"props":76,"children":77},{},[78],{"type":32,"value":79},"更适合放进 Nuxt 中间件的场景通常包括：",{"type":27,"tag":40,"props":81,"children":82},{},[83,88,93,98],{"type":27,"tag":44,"props":84,"children":85},{},[86],{"type":32,"value":87},"是否需要登录",{"type":27,"tag":44,"props":89,"children":90},{},[91],{"type":32,"value":92},"是否需要某类角色或租户权限",{"type":27,"tag":44,"props":94,"children":95},{},[96],{"type":32,"value":97},"是否需要按环境或实验配置重定向",{"type":27,"tag":44,"props":99,"children":100},{},[101],{"type":32,"value":102},"是否需要根据页面元信息做统一校验",{"type":27,"tag":28,"props":104,"children":105},{},[106],{"type":32,"value":107},"如果把组件内局部交互判断也塞进中间件，很快就会让守卫链路过重。",{"type":27,"tag":65,"props":109,"children":111},{"id":110},"路由守卫要先拆成三层职责",[112],{"type":32,"value":110},{"type":27,"tag":28,"props":114,"children":115},{},[116],{"type":32,"value":117},"更稳的结构通常是：",{"type":27,"tag":40,"props":119,"children":120},{},[121,126,131],{"type":27,"tag":44,"props":122,"children":123},{},[124],{"type":32,"value":125},"全局中间件：处理站点级规则，例如登录态恢复、维护模式、实验流量入口",{"type":27,"tag":44,"props":127,"children":128},{},[129],{"type":32,"value":130},"命名中间件：处理业务域规则，例如后台权限、会员页访问、租户隔离",{"type":27,"tag":44,"props":132,"children":133},{},[134],{"type":32,"value":135},"页面内判断：处理仅与当前视图交互有关的局部权限",{"type":27,"tag":28,"props":137,"children":138},{},[139],{"type":32,"value":140},"把这三层拆开后，团队更容易判断某条逻辑应该放在哪里，而不是一有权限需求就把代码堆进全局守卫。",{"type":27,"tag":65,"props":142,"children":144},{"id":143},"页面元信息比硬编码路径更适合承载规则",[145],{"type":32,"value":143},{"type":27,"tag":28,"props":147,"children":148},{},[149,151,158,160,166,167,173],{"type":32,"value":150},"很多团队会直接用路径前缀做判断，比如 ",{"type":27,"tag":152,"props":153,"children":155},"code",{"className":154},[],[156],{"type":32,"value":157},"/admin",{"type":32,"value":159},"、",{"type":27,"tag":152,"props":161,"children":163},{"className":162},[],[164],{"type":32,"value":165},"/member",{"type":32,"value":159},{"type":27,"tag":152,"props":168,"children":170},{"className":169},[],[171],{"type":32,"value":172},"/settings",{"type":32,"value":174},"。",{"type":27,"tag":28,"props":176,"children":177},{},[178],{"type":32,"value":179},"这种方式起步很快，但随着站点增长，问题会越来越多：",{"type":27,"tag":40,"props":181,"children":182},{},[183,188,193],{"type":27,"tag":44,"props":184,"children":185},{},[186],{"type":32,"value":187},"路由重构时容易漏改",{"type":27,"tag":44,"props":189,"children":190},{},[191],{"type":32,"value":192},"相似路径不一定代表相同权限",{"type":27,"tag":44,"props":194,"children":195},{},[196],{"type":32,"value":197},"权限语义被路径结构绑死",{"type":27,"tag":28,"props":199,"children":200},{},[201],{"type":32,"value":202},"更可维护的方式，是通过页面元信息声明守卫需求。",{"type":27,"tag":204,"props":205,"children":210},"pre",{"className":206,"code":208,"language":209,"meta":7},[207],"language-ts","definePageMeta({\n  middleware: ['auth', 'role-admin'],\n  requiresSubscription: true,\n})\n","ts",[211],{"type":27,"tag":152,"props":212,"children":213},{"__ignoreMap":7},[214],{"type":32,"value":208},{"type":27,"tag":28,"props":216,"children":217},{},[218],{"type":32,"value":219},"这样中间件不再依赖路径猜测，而是读取页面显式声明的访问规则。",{"type":27,"tag":65,"props":221,"children":223},{"id":222},"重定向策略要避免循环和状态丢失",[224],{"type":32,"value":222},{"type":27,"tag":28,"props":226,"children":227},{},[228],{"type":32,"value":229},"权限守卫最常见的线上故障之一，就是错误重定向链路。",{"type":27,"tag":28,"props":231,"children":232},{},[233],{"type":32,"value":234},"典型问题包括：",{"type":27,"tag":40,"props":236,"children":237},{},[238,243,248],{"type":27,"tag":44,"props":239,"children":240},{},[241],{"type":32,"value":242},"未登录用户被跳到登录页后，登录成功又回不去原页",{"type":27,"tag":44,"props":244,"children":245},{},[246],{"type":32,"value":247},"登录用户访问登录页被反复重定向",{"type":27,"tag":44,"props":249,"children":250},{},[251],{"type":32,"value":252},"角色不足时被送回首页，用户完全不知道为什么",{"type":27,"tag":28,"props":254,"children":255},{},[256],{"type":32,"value":257},"因此重定向策略至少要做到：",{"type":27,"tag":40,"props":259,"children":260},{},[261,266,271],{"type":27,"tag":44,"props":262,"children":263},{},[264],{"type":32,"value":265},"保留来源路径",{"type":27,"tag":44,"props":267,"children":268},{},[269],{"type":32,"value":270},"区分“未登录”和“无权限”",{"type":27,"tag":44,"props":272,"children":273},{},[274],{"type":32,"value":275},"对公开页、登录页和受保护页使用不同处理方式",{"type":27,"tag":65,"props":277,"children":279},{"id":278},"服务端与客户端守卫要统一口径",[280],{"type":32,"value":278},{"type":27,"tag":28,"props":282,"children":283},{},[284],{"type":32,"value":285},"Nuxt 中间件在 SSR 和 CSR 场景下都可能执行，所以权限判断不能只依赖浏览器态信息。",{"type":27,"tag":28,"props":287,"children":288},{},[289],{"type":32,"value":290},"更稳的做法是：",{"type":27,"tag":40,"props":292,"children":293},{},[294,299,304],{"type":27,"tag":44,"props":295,"children":296},{},[297],{"type":32,"value":298},"登录态来源统一封装",{"type":27,"tag":44,"props":300,"children":301},{},[302],{"type":32,"value":303},"角色信息尽量在服务端就拿到",{"type":27,"tag":44,"props":305,"children":306},{},[307],{"type":32,"value":308},"客户端只负责补充体验，不负责定义最终权限",{"type":27,"tag":28,"props":310,"children":311},{},[312],{"type":32,"value":313},"如果客户端判断和服务端判断口径不同，就会出现服务端允许、客户端拒绝，或者相反的错乱行为。",{"type":27,"tag":65,"props":315,"children":317},{"id":316},"常见失败案例守卫生效了但维护成本越来越高",[318],{"type":32,"value":319},"常见失败案例：守卫生效了，但维护成本越来越高",{"type":27,"tag":28,"props":321,"children":322},{},[323],{"type":32,"value":324},"这类项目通常不是中间件没写对，而是没有治理规则：",{"type":27,"tag":40,"props":326,"children":327},{},[328,333,338,343],{"type":27,"tag":44,"props":329,"children":330},{},[331],{"type":32,"value":332},"业务方随手新增一个守卫文件",{"type":27,"tag":44,"props":334,"children":335},{},[336],{"type":32,"value":337},"相同逻辑在不同中间件中重复存在",{"type":27,"tag":44,"props":339,"children":340},{},[341],{"type":32,"value":342},"页面元信息没有统一约定",{"type":27,"tag":44,"props":344,"children":345},{},[346],{"type":32,"value":347},"出现跳转异常时没人说得清哪一层负责",{"type":27,"tag":28,"props":349,"children":350},{},[351],{"type":32,"value":352},"长期看，问题不在认证复杂，而在守卫体系失去可读性。",{"type":27,"tag":65,"props":354,"children":356},{"id":355},"一套更可执行的治理方式",[357],{"type":32,"value":355},{"type":27,"tag":28,"props":359,"children":360},{},[361],{"type":32,"value":362},"推荐团队至少建立四个约定：",{"type":27,"tag":364,"props":365,"children":366},"ol",{},[367,372,377,382],{"type":27,"tag":44,"props":368,"children":369},{},[370],{"type":32,"value":371},"中间件只处理路由进入前的统一决策",{"type":27,"tag":44,"props":373,"children":374},{},[375],{"type":32,"value":376},"页面权限需求优先通过元信息声明",{"type":27,"tag":44,"props":378,"children":379},{},[380],{"type":32,"value":381},"重定向结果必须保留来源和失败原因",{"type":27,"tag":44,"props":383,"children":384},{},[385],{"type":32,"value":386},"守卫命名按职责分层，禁止重复造近义规则",{"type":27,"tag":28,"props":388,"children":389},{},[390],{"type":32,"value":391},"这样后续新增权限场景时，大家是在扩展体系，而不是继续堆条件分支。",{"type":27,"tag":65,"props":393,"children":395},{"id":394},"一份可直接复用的检查清单",[396],{"type":32,"value":394},{"type":27,"tag":40,"props":398,"children":399},{},[400,405,410,415,420],{"type":27,"tag":44,"props":401,"children":402},{},[403],{"type":32,"value":404},"是否区分了全局守卫、命名守卫和页面内局部判断",{"type":27,"tag":44,"props":406,"children":407},{},[408],{"type":32,"value":409},"权限需求是否通过页面元信息显式声明",{"type":27,"tag":44,"props":411,"children":412},{},[413],{"type":32,"value":414},"重定向是否保留来源路径并区分未登录与无权限",{"type":27,"tag":44,"props":416,"children":417},{},[418],{"type":32,"value":419},"服务端与客户端是否使用同一套权限口径",{"type":27,"tag":44,"props":421,"children":422},{},[423],{"type":32,"value":424},"守卫文件是否有清晰命名和去重规则",{"type":27,"tag":65,"props":426,"children":428},{"id":427},"总结",[429],{"type":32,"value":427},{"type":27,"tag":28,"props":431,"children":432},{},[433],{"type":32,"value":434},"Nuxt 中间件与路由守卫真正要解决的，不是“能不能拦住访问”，而是“能不能让权限策略长期可读、可扩展、可调试”。只要职责分层、规则声明和重定向策略被统一，守卫体系就会稳定很多。",{"type":27,"tag":28,"props":436,"children":437},{},[438],{"type":32,"value":439},"进一步阅读：",{"type":27,"tag":40,"props":441,"children":442},{},[443,453,462],{"type":27,"tag":44,"props":444,"children":445},{},[446],{"type":27,"tag":447,"props":448,"children":450},"a",{"href":449},"/topics/nuxt/nuxt-runtime-config-management",[451],{"type":32,"value":452},"Nuxt 运行时配置管理",{"type":27,"tag":44,"props":454,"children":455},{},[456],{"type":27,"tag":447,"props":457,"children":459},{"href":458},"/topics/nuxt/nuxt-compatibility-layer-gradual-upgrade-guide",[460],{"type":32,"value":461},"兼容层与渐进式升级",{"type":27,"tag":44,"props":463,"children":464},{},[465],{"type":27,"tag":447,"props":466,"children":468},{"href":467},"/topics/nuxt/nuxt-server-routes-complete-guide",[469],{"type":32,"value":470},"Nuxt Server Routes 完整指南",{"title":7,"searchDepth":472,"depth":472,"links":473},3,[474,476,477,478,479,480,481,482,483],{"id":67,"depth":475,"text":67},2,{"id":110,"depth":475,"text":110},{"id":143,"depth":475,"text":143},{"id":222,"depth":475,"text":222},{"id":278,"depth":475,"text":278},{"id":316,"depth":475,"text":319},{"id":355,"depth":475,"text":355},{"id":394,"depth":475,"text":394},{"id":427,"depth":475,"text":427},"markdown","content:topics:nuxt:nuxt-middleware-route-guard-advanced-patterns.md","content","topics/nuxt/nuxt-middleware-route-guard-advanced-patterns.md","topics/nuxt/nuxt-middleware-route-guard-advanced-patterns","md",[491,1476,2260],{"_path":492,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":493,"description":494,"date":495,"topic":5,"author":11,"tags":496,"image":502,"featured":503,"readingTime":504,"body":505,"_type":484,"_id":1473,"_source":486,"_file":1474,"_stem":1475,"_extension":489},"/topics/nuxt/nitro-engine-deep-dive","Nitro 引擎深度剖析","讲透 Nuxt/Nitro 的运行时模型、路由与中间件、存储层与缓存、部署适配与性能调优，帮助你把服务端能力当成可控的工程系统。","2026-01-20",[13,497,498,499,500,501],"Nitro","SSR","Serverless","Edge","缓存","/images/topics/nuxt/nitro.jpg",true,21,{"type":24,"children":506,"toc":1441},[507,512,524,529,587,592,597,601,607,612,635,640,658,661,667,672,695,700,703,725,737,755,766,779,785,808,811,817,822,853,858,871,874,880,892,905,910,928,933,946,949,955,960,978,984,1003,1009,1014,1019,1048,1051,1057,1062,1080,1085,1103,1109,1122,1128,1141,1147,1160,1165,1178,1181,1187,1193,1206,1212,1225,1231,1244,1247,1253,1258,1281,1286,1299,1302,1308,1313,1371,1376,1394,1397,1401,1413,1418],{"type":27,"tag":65,"props":508,"children":510},{"id":509},"nitro-引擎深度剖析",[511],{"type":32,"value":493},{"type":27,"tag":28,"props":513,"children":514},{},[515,517,523],{"type":32,"value":516},"在 Nuxt 3/4 的体系里，Nitro 不是“一个服务器”，而是一套",{"type":27,"tag":518,"props":519,"children":520},"strong",{},[521],{"type":32,"value":522},"可移植的服务端运行时与构建产物规范",{"type":32,"value":174},{"type":27,"tag":28,"props":525,"children":526},{},[527],{"type":32,"value":528},"它把你在开发时写的：",{"type":27,"tag":40,"props":530,"children":531},{},[532,543,554,565,576],{"type":27,"tag":44,"props":533,"children":534},{},[535,541],{"type":27,"tag":152,"props":536,"children":538},{"className":537},[],[539],{"type":32,"value":540},"server/api/*",{"type":32,"value":542},"（API 路由）",{"type":27,"tag":44,"props":544,"children":545},{},[546,552],{"type":27,"tag":152,"props":547,"children":549},{"className":548},[],[550],{"type":32,"value":551},"server/routes/*",{"type":32,"value":553},"（更底层路由）",{"type":27,"tag":44,"props":555,"children":556},{},[557,563],{"type":27,"tag":152,"props":558,"children":560},{"className":559},[],[561],{"type":32,"value":562},"server/middleware/*",{"type":32,"value":564},"（中间件）",{"type":27,"tag":44,"props":566,"children":567},{},[568,574],{"type":27,"tag":152,"props":569,"children":571},{"className":570},[],[572],{"type":32,"value":573},"server/plugins/*",{"type":32,"value":575},"（启动插件）",{"type":27,"tag":44,"props":577,"children":578},{},[579,585],{"type":27,"tag":152,"props":580,"children":582},{"className":581},[],[583],{"type":32,"value":584},"storage",{"type":32,"value":586},"（KV/文件/内存等存储抽象）",{"type":27,"tag":28,"props":588,"children":589},{},[590],{"type":32,"value":591},"统一编译成一个可以部署到多种环境的产物：Node Server、Serverless、Edge（取决于适配器与能力集）。",{"type":27,"tag":28,"props":593,"children":594},{},[595],{"type":32,"value":596},"这篇文章按“你要在生产上稳定运行”的视角，拆解 Nitro 的关键构件，并给出性能与可观测性落地建议。",{"type":27,"tag":598,"props":599,"children":600},"hr",{},[],{"type":27,"tag":65,"props":602,"children":604},{"id":603},"_1-nitro-的定位从-nuxt-ssr-到通用服务端运行时",[605],{"type":32,"value":606},"1. Nitro 的定位：从 Nuxt SSR 到“通用服务端运行时”",{"type":27,"tag":28,"props":608,"children":609},{},[610],{"type":32,"value":611},"Nitro 解决两类问题：",{"type":27,"tag":364,"props":613,"children":614},{},[615,625],{"type":27,"tag":44,"props":616,"children":617},{},[618,623],{"type":27,"tag":518,"props":619,"children":620},{},[621],{"type":32,"value":622},"运行时统一",{"type":32,"value":624},"：开发/生产环境一致的请求处理模型",{"type":27,"tag":44,"props":626,"children":627},{},[628,633],{"type":27,"tag":518,"props":629,"children":630},{},[631],{"type":32,"value":632},"部署可移植",{"type":32,"value":634},"：同一套代码可输出到不同部署目标",{"type":27,"tag":28,"props":636,"children":637},{},[638],{"type":32,"value":639},"你可以把 Nitro 看作 Nuxt 的“服务端内核”，而 Nuxt 只是围绕它提供：",{"type":27,"tag":40,"props":641,"children":642},{},[643,648,653],{"type":27,"tag":44,"props":644,"children":645},{},[646],{"type":32,"value":647},"视图渲染（SSR/RSC 相关能力）",{"type":27,"tag":44,"props":649,"children":650},{},[651],{"type":32,"value":652},"资源构建（Vite/Webpack）",{"type":27,"tag":44,"props":654,"children":655},{},[656],{"type":32,"value":657},"路由与数据获取的上层抽象",{"type":27,"tag":598,"props":659,"children":660},{},[],{"type":27,"tag":65,"props":662,"children":664},{"id":663},"_2-请求生命周期一次请求在-nitro-里怎么走",[665],{"type":32,"value":666},"2. 请求生命周期：一次请求在 Nitro 里怎么走？",{"type":27,"tag":28,"props":668,"children":669},{},[670],{"type":32,"value":671},"简化后的请求链路：",{"type":27,"tag":364,"props":673,"children":674},{},[675,680,685,690],{"type":27,"tag":44,"props":676,"children":677},{},[678],{"type":32,"value":679},"入口适配器接收请求（Node/Serverless/Edge）",{"type":27,"tag":44,"props":681,"children":682},{},[683],{"type":32,"value":684},"进入 Nitro 的 H3 请求处理器（统一事件模型）",{"type":27,"tag":44,"props":686,"children":687},{},[688],{"type":32,"value":689},"依次执行：中间件 → 路由匹配 → handler",{"type":27,"tag":44,"props":691,"children":692},{},[693],{"type":32,"value":694},"写回响应（含 headers、缓存策略、流式输出等）",{"type":27,"tag":28,"props":696,"children":697},{},[698],{"type":32,"value":699},"关键点：Nitro 用统一的事件对象承载请求上下文，这让你在不同部署目标下写出的 server 代码保持一致。",{"type":27,"tag":598,"props":701,"children":702},{},[],{"type":27,"tag":65,"props":704,"children":706},{"id":705},"_3-路由系统serverapi-与-serverroutes-的区别",[707,709,715,717,723],{"type":32,"value":708},"3. 路由系统：",{"type":27,"tag":152,"props":710,"children":712},{"className":711},[],[713],{"type":32,"value":714},"server/api",{"type":32,"value":716}," 与 ",{"type":27,"tag":152,"props":718,"children":720},{"className":719},[],[721],{"type":32,"value":722},"server/routes",{"type":32,"value":724}," 的区别",{"type":27,"tag":726,"props":727,"children":729},"h3",{"id":728},"_31-serverapi",[730,732],{"type":32,"value":731},"3.1 ",{"type":27,"tag":152,"props":733,"children":735},{"className":734},[],[736],{"type":32,"value":540},{"type":27,"tag":40,"props":738,"children":739},{},[740,745,750],{"type":27,"tag":44,"props":741,"children":742},{},[743],{"type":32,"value":744},"面向 API 的约定式目录",{"type":27,"tag":44,"props":746,"children":747},{},[748],{"type":32,"value":749},"通常返回 JSON",{"type":27,"tag":44,"props":751,"children":752},{},[753],{"type":32,"value":754},"与 Nuxt 的开发体验高度整合",{"type":27,"tag":726,"props":756,"children":758},{"id":757},"_32-serverroutes",[759,761],{"type":32,"value":760},"3.2 ",{"type":27,"tag":152,"props":762,"children":764},{"className":763},[],[765],{"type":32,"value":551},{"type":27,"tag":40,"props":767,"children":768},{},[769,774],{"type":27,"tag":44,"props":770,"children":771},{},[772],{"type":32,"value":773},"更底层，更贴近“HTTP 路由”",{"type":27,"tag":44,"props":775,"children":776},{},[777],{"type":32,"value":778},"更适合做：Webhook、回调、代理、特殊 content-type",{"type":27,"tag":726,"props":780,"children":782},{"id":781},"_33-实践建议",[783],{"type":32,"value":784},"3.3 实践建议",{"type":27,"tag":40,"props":786,"children":787},{},[788,798],{"type":27,"tag":44,"props":789,"children":790},{},[791,793],{"type":32,"value":792},"普通业务 API：优先 ",{"type":27,"tag":152,"props":794,"children":796},{"className":795},[],[797],{"type":32,"value":714},{"type":27,"tag":44,"props":799,"children":800},{},[801,803],{"type":32,"value":802},"需要更强控制（stream、代理、非 JSON）：用 ",{"type":27,"tag":152,"props":804,"children":806},{"className":805},[],[807],{"type":32,"value":722},{"type":27,"tag":598,"props":809,"children":810},{},[],{"type":27,"tag":65,"props":812,"children":814},{"id":813},"_4-中间件全局逻辑的正确放置",[815],{"type":32,"value":816},"4. 中间件：全局逻辑的正确放置",{"type":27,"tag":28,"props":818,"children":819},{},[820],{"type":32,"value":821},"Nitro 中的中间件通常用于：",{"type":27,"tag":40,"props":823,"children":824},{},[825,830,843,848],{"type":27,"tag":44,"props":826,"children":827},{},[828],{"type":32,"value":829},"鉴权/鉴别请求来源",{"type":27,"tag":44,"props":831,"children":832},{},[833,835,841],{"type":32,"value":834},"注入 ",{"type":27,"tag":152,"props":836,"children":838},{"className":837},[],[839],{"type":32,"value":840},"requestId",{"type":32,"value":842},"、trace 信息",{"type":27,"tag":44,"props":844,"children":845},{},[846],{"type":32,"value":847},"统一错误处理与日志",{"type":27,"tag":44,"props":849,"children":850},{},[851],{"type":32,"value":852},"基础安全 headers",{"type":27,"tag":28,"props":854,"children":855},{},[856],{"type":32,"value":857},"一个推荐的中间件职责边界：",{"type":27,"tag":40,"props":859,"children":860},{},[861,866],{"type":27,"tag":44,"props":862,"children":863},{},[864],{"type":32,"value":865},"中间件只做“横切关注点”",{"type":27,"tag":44,"props":867,"children":868},{},[869],{"type":32,"value":870},"不做具体业务（避免耦合与隐式依赖）",{"type":27,"tag":598,"props":872,"children":873},{},[],{"type":27,"tag":65,"props":875,"children":877},{"id":876},"_5-storage-抽象让缓存与数据存取可替换",[878],{"type":32,"value":879},"5. Storage 抽象：让缓存与数据存取可替换",{"type":27,"tag":28,"props":881,"children":882},{},[883,885,890],{"type":32,"value":884},"Nitro 的一个被低估的能力是 ",{"type":27,"tag":152,"props":886,"children":888},{"className":887},[],[889],{"type":32,"value":584},{"type":32,"value":891},"：",{"type":27,"tag":40,"props":893,"children":894},{},[895,900],{"type":27,"tag":44,"props":896,"children":897},{},[898],{"type":32,"value":899},"提供 KV 风格 API",{"type":27,"tag":44,"props":901,"children":902},{},[903],{"type":32,"value":904},"可接入内存、文件、Redis 等（取决于配置与环境）",{"type":27,"tag":28,"props":906,"children":907},{},[908],{"type":32,"value":909},"你可以用它做：",{"type":27,"tag":40,"props":911,"children":912},{},[913,918,923],{"type":27,"tag":44,"props":914,"children":915},{},[916],{"type":32,"value":917},"缓存（页面片段、API 结果）",{"type":27,"tag":44,"props":919,"children":920},{},[921],{"type":32,"value":922},"限流计数器",{"type":27,"tag":44,"props":924,"children":925},{},[926],{"type":32,"value":927},"临时会话信息",{"type":27,"tag":28,"props":929,"children":930},{},[931],{"type":32,"value":932},"设计原则：",{"type":27,"tag":40,"props":934,"children":935},{},[936,941],{"type":27,"tag":44,"props":937,"children":938},{},[939],{"type":32,"value":940},"把 storage 当成“可失效缓存”，不要当主数据库",{"type":27,"tag":44,"props":942,"children":943},{},[944],{"type":32,"value":945},"明确 TTL 与清理策略",{"type":27,"tag":598,"props":947,"children":948},{},[],{"type":27,"tag":65,"props":950,"children":952},{"id":951},"_6-缓存策略把快变成可控的工程能力",[953],{"type":32,"value":954},"6. 缓存策略：把“快”变成可控的工程能力",{"type":27,"tag":28,"props":956,"children":957},{},[958],{"type":32,"value":959},"Nitro 里的缓存往往涉及三层：",{"type":27,"tag":364,"props":961,"children":962},{},[963,968,973],{"type":27,"tag":44,"props":964,"children":965},{},[966],{"type":32,"value":967},"CDN 缓存（边缘）",{"type":27,"tag":44,"props":969,"children":970},{},[971],{"type":32,"value":972},"Nitro 运行时缓存（storage）",{"type":27,"tag":44,"props":974,"children":975},{},[976],{"type":32,"value":977},"上游服务缓存（数据库/服务端）",{"type":27,"tag":726,"props":979,"children":981},{"id":980},"_61-api-缓存的推荐做法",[982],{"type":32,"value":983},"6.1 API 缓存的推荐做法",{"type":27,"tag":40,"props":985,"children":986},{},[987,998],{"type":27,"tag":44,"props":988,"children":989},{},[990,992],{"type":32,"value":991},"对“读多写少”的接口做 ",{"type":27,"tag":152,"props":993,"children":995},{"className":994},[],[996],{"type":32,"value":997},"stale-while-revalidate",{"type":27,"tag":44,"props":999,"children":1000},{},[1001],{"type":32,"value":1002},"缓存 key 必须包含：用户态/语言/地区/权限等关键维度",{"type":27,"tag":726,"props":1004,"children":1006},{"id":1005},"_62-不要缓存带用户身份的响应除非你非常确定",[1007],{"type":32,"value":1008},"6.2 不要缓存“带用户身份”的响应（除非你非常确定）",{"type":27,"tag":28,"props":1010,"children":1011},{},[1012],{"type":32,"value":1013},"最容易出事故的是把 A 用户的数据缓存给 B 用户。",{"type":27,"tag":28,"props":1015,"children":1016},{},[1017],{"type":32,"value":1018},"建议：",{"type":27,"tag":40,"props":1020,"children":1021},{},[1022,1027],{"type":27,"tag":44,"props":1023,"children":1024},{},[1025],{"type":32,"value":1026},"默认对用户态接口不缓存",{"type":27,"tag":44,"props":1028,"children":1029},{},[1030,1032,1038,1040,1046],{"type":32,"value":1031},"必须缓存时，key 中加入 ",{"type":27,"tag":152,"props":1033,"children":1035},{"className":1034},[],[1036],{"type":32,"value":1037},"userId",{"type":32,"value":1039}," 或 ",{"type":27,"tag":152,"props":1041,"children":1043},{"className":1042},[],[1044],{"type":32,"value":1045},"session",{"type":32,"value":1047}," 维度",{"type":27,"tag":598,"props":1049,"children":1050},{},[],{"type":27,"tag":65,"props":1052,"children":1054},{"id":1053},"_7-部署适配为什么同一套代码能跑在不同环境",[1055],{"type":32,"value":1056},"7. 部署适配：为什么同一套代码能跑在不同环境？",{"type":27,"tag":28,"props":1058,"children":1059},{},[1060],{"type":32,"value":1061},"Nitro 的部署产物通常包含：",{"type":27,"tag":40,"props":1063,"children":1064},{},[1065,1070,1075],{"type":27,"tag":44,"props":1066,"children":1067},{},[1068],{"type":32,"value":1069},"编译后的 server bundle",{"type":27,"tag":44,"props":1071,"children":1072},{},[1073],{"type":32,"value":1074},"路由清单与运行时配置",{"type":27,"tag":44,"props":1076,"children":1077},{},[1078],{"type":32,"value":1079},"静态资源与预渲染结果（如果启用）",{"type":27,"tag":28,"props":1081,"children":1082},{},[1083],{"type":32,"value":1084},"在不同目标下的差异主要在：",{"type":27,"tag":40,"props":1086,"children":1087},{},[1088,1093,1098],{"type":27,"tag":44,"props":1089,"children":1090},{},[1091],{"type":32,"value":1092},"运行时能力（Node API 是否可用）",{"type":27,"tag":44,"props":1094,"children":1095},{},[1096],{"type":32,"value":1097},"冷启动与并发模型",{"type":27,"tag":44,"props":1099,"children":1100},{},[1101],{"type":32,"value":1102},"文件系统是否可写",{"type":27,"tag":726,"props":1104,"children":1106},{"id":1105},"_71-node-server",[1107],{"type":32,"value":1108},"7.1 Node Server",{"type":27,"tag":40,"props":1110,"children":1111},{},[1112,1117],{"type":27,"tag":44,"props":1113,"children":1114},{},[1115],{"type":32,"value":1116},"能力最完整",{"type":27,"tag":44,"props":1118,"children":1119},{},[1120],{"type":32,"value":1121},"适合长连接、websocket（需配合平台）",{"type":27,"tag":726,"props":1123,"children":1125},{"id":1124},"_72-serverless",[1126],{"type":32,"value":1127},"7.2 Serverless",{"type":27,"tag":40,"props":1129,"children":1130},{},[1131,1136],{"type":27,"tag":44,"props":1132,"children":1133},{},[1134],{"type":32,"value":1135},"冷启动成本、执行时长限制",{"type":27,"tag":44,"props":1137,"children":1138},{},[1139],{"type":32,"value":1140},"更适合 API 型工作负载",{"type":27,"tag":726,"props":1142,"children":1144},{"id":1143},"_73-edge",[1145],{"type":32,"value":1146},"7.3 Edge",{"type":27,"tag":40,"props":1148,"children":1149},{},[1150,1155],{"type":27,"tag":44,"props":1151,"children":1152},{},[1153],{"type":32,"value":1154},"延迟更低",{"type":27,"tag":44,"props":1156,"children":1157},{},[1158],{"type":32,"value":1159},"运行时限制更严格（例如 Node API 不可用）",{"type":27,"tag":28,"props":1161,"children":1162},{},[1163],{"type":32,"value":1164},"实践建议：",{"type":27,"tag":40,"props":1166,"children":1167},{},[1168,1173],{"type":27,"tag":44,"props":1169,"children":1170},{},[1171],{"type":32,"value":1172},"如果你依赖复杂 Node 能力（例如图像处理、原生模块），优先 Node/Serverless",{"type":27,"tag":44,"props":1174,"children":1175},{},[1176],{"type":32,"value":1177},"如果你追求极致延迟且逻辑简单，考虑 Edge",{"type":27,"tag":598,"props":1179,"children":1180},{},[],{"type":27,"tag":65,"props":1182,"children":1184},{"id":1183},"_8-性能调优nitro-侧你能做什么",[1185],{"type":32,"value":1186},"8. 性能调优：Nitro 侧你能做什么？",{"type":27,"tag":726,"props":1188,"children":1190},{"id":1189},"_81-减少阻塞-io",[1191],{"type":32,"value":1192},"8.1 减少阻塞 I/O",{"type":27,"tag":40,"props":1194,"children":1195},{},[1196,1201],{"type":27,"tag":44,"props":1197,"children":1198},{},[1199],{"type":32,"value":1200},"避免请求内做同步文件读写",{"type":27,"tag":44,"props":1202,"children":1203},{},[1204],{"type":32,"value":1205},"对“配置/规则”等可缓存数据做启动预热",{"type":27,"tag":726,"props":1207,"children":1209},{"id":1208},"_82-控制上游依赖",[1210],{"type":32,"value":1211},"8.2 控制上游依赖",{"type":27,"tag":40,"props":1213,"children":1214},{},[1215,1220],{"type":27,"tag":44,"props":1216,"children":1217},{},[1218],{"type":32,"value":1219},"给外部请求设超时（例如 2~3s）",{"type":27,"tag":44,"props":1221,"children":1222},{},[1223],{"type":32,"value":1224},"加重试要谨慎（避免雪崩）",{"type":27,"tag":726,"props":1226,"children":1228},{"id":1227},"_83-响应体积与压缩",[1229],{"type":32,"value":1230},"8.3 响应体积与压缩",{"type":27,"tag":40,"props":1232,"children":1233},{},[1234,1239],{"type":27,"tag":44,"props":1235,"children":1236},{},[1237],{"type":32,"value":1238},"JSON 输出控制字段",{"type":27,"tag":44,"props":1240,"children":1241},{},[1242],{"type":32,"value":1243},"开启 gzip/br",{"type":27,"tag":598,"props":1245,"children":1246},{},[],{"type":27,"tag":65,"props":1248,"children":1250},{"id":1249},"_9-可观测性没有观测就没有稳定",[1251],{"type":32,"value":1252},"9. 可观测性：没有观测就没有“稳定”",{"type":27,"tag":28,"props":1254,"children":1255},{},[1256],{"type":32,"value":1257},"建议 Nitro 侧最小可观测集合：",{"type":27,"tag":40,"props":1259,"children":1260},{},[1261,1266,1271,1276],{"type":27,"tag":44,"props":1262,"children":1263},{},[1264],{"type":32,"value":1265},"requestId/traceId",{"type":27,"tag":44,"props":1267,"children":1268},{},[1269],{"type":32,"value":1270},"关键路由耗时（p50/p95）",{"type":27,"tag":44,"props":1272,"children":1273},{},[1274],{"type":32,"value":1275},"错误率（按路由/按状态码）",{"type":27,"tag":44,"props":1277,"children":1278},{},[1279],{"type":32,"value":1280},"上游依赖耗时（DB/HTTP）",{"type":27,"tag":28,"props":1282,"children":1283},{},[1284],{"type":32,"value":1285},"落地方式：",{"type":27,"tag":40,"props":1287,"children":1288},{},[1289,1294],{"type":27,"tag":44,"props":1290,"children":1291},{},[1292],{"type":32,"value":1293},"在中间件注入 requestId",{"type":27,"tag":44,"props":1295,"children":1296},{},[1297],{"type":32,"value":1298},"在统一错误处理处记录结构化日志",{"type":27,"tag":598,"props":1300,"children":1301},{},[],{"type":27,"tag":65,"props":1303,"children":1305},{"id":1304},"_10-一个推荐的-nitro-工程结构",[1306],{"type":32,"value":1307},"10. 一个推荐的 Nitro 工程结构",{"type":27,"tag":28,"props":1309,"children":1310},{},[1311],{"type":32,"value":1312},"在 Nuxt 项目里，你可以这样组织服务端代码：",{"type":27,"tag":40,"props":1314,"children":1315},{},[1316,1327,1338,1349,1360],{"type":27,"tag":44,"props":1317,"children":1318},{},[1319,1325],{"type":27,"tag":152,"props":1320,"children":1322},{"className":1321},[],[1323],{"type":32,"value":1324},"server/middleware/",{"type":32,"value":1326},"：鉴权、日志、headers、rate limit",{"type":27,"tag":44,"props":1328,"children":1329},{},[1330,1336],{"type":27,"tag":152,"props":1331,"children":1333},{"className":1332},[],[1334],{"type":32,"value":1335},"server/api/",{"type":32,"value":1337},"：业务 API（薄控制器）",{"type":27,"tag":44,"props":1339,"children":1340},{},[1341,1347],{"type":27,"tag":152,"props":1342,"children":1344},{"className":1343},[],[1345],{"type":32,"value":1346},"server/services/",{"type":32,"value":1348},"：领域服务（可复用）",{"type":27,"tag":44,"props":1350,"children":1351},{},[1352,1358],{"type":27,"tag":152,"props":1353,"children":1355},{"className":1354},[],[1356],{"type":32,"value":1357},"server/repositories/",{"type":32,"value":1359},"：数据访问层",{"type":27,"tag":44,"props":1361,"children":1362},{},[1363,1369],{"type":27,"tag":152,"props":1364,"children":1366},{"className":1365},[],[1367],{"type":32,"value":1368},"server/utils/",{"type":32,"value":1370},"：纯工具",{"type":27,"tag":28,"props":1372,"children":1373},{},[1374],{"type":32,"value":1375},"目标是：",{"type":27,"tag":40,"props":1377,"children":1378},{},[1379,1384,1389],{"type":27,"tag":44,"props":1380,"children":1381},{},[1382],{"type":32,"value":1383},"handler 只做协议适配",{"type":27,"tag":44,"props":1385,"children":1386},{},[1387],{"type":32,"value":1388},"业务逻辑可复用、可测试",{"type":27,"tag":44,"props":1390,"children":1391},{},[1392],{"type":32,"value":1393},"横切能力集中化",{"type":27,"tag":598,"props":1395,"children":1396},{},[],{"type":27,"tag":65,"props":1398,"children":1399},{"id":427},[1400],{"type":32,"value":427},{"type":27,"tag":28,"props":1402,"children":1403},{},[1404,1406,1411],{"type":32,"value":1405},"Nitro 的本质是：把 Nuxt 的服务端能力变成一个",{"type":27,"tag":518,"props":1407,"children":1408},{},[1409],{"type":32,"value":1410},"可编译、可移植、可观测",{"type":32,"value":1412},"的运行时系统。",{"type":27,"tag":28,"props":1414,"children":1415},{},[1416],{"type":32,"value":1417},"你一旦理解了它的生命周期与边界，就可以更有信心地在 Nuxt 里做：",{"type":27,"tag":40,"props":1419,"children":1420},{},[1421,1426,1431,1436],{"type":27,"tag":44,"props":1422,"children":1423},{},[1424],{"type":32,"value":1425},"性能友好的 API",{"type":27,"tag":44,"props":1427,"children":1428},{},[1429],{"type":32,"value":1430},"可控的缓存",{"type":27,"tag":44,"props":1432,"children":1433},{},[1434],{"type":32,"value":1435},"稳定的鉴权与错误处理",{"type":27,"tag":44,"props":1437,"children":1438},{},[1439],{"type":32,"value":1440},"面向多环境部署的工程架构",{"title":7,"searchDepth":472,"depth":472,"links":1442},[1443,1444,1445,1446,1454,1455,1456,1460,1465,1470,1471,1472],{"id":509,"depth":475,"text":493},{"id":603,"depth":475,"text":606},{"id":663,"depth":475,"text":666},{"id":705,"depth":475,"text":1447,"children":1448},"3. 路由系统：server/api 与 server/routes 的区别",[1449,1451,1453],{"id":728,"depth":472,"text":1450},"3.1 server/api/*",{"id":757,"depth":472,"text":1452},"3.2 server/routes/*",{"id":781,"depth":472,"text":784},{"id":813,"depth":475,"text":816},{"id":876,"depth":475,"text":879},{"id":951,"depth":475,"text":954,"children":1457},[1458,1459],{"id":980,"depth":472,"text":983},{"id":1005,"depth":472,"text":1008},{"id":1053,"depth":475,"text":1056,"children":1461},[1462,1463,1464],{"id":1105,"depth":472,"text":1108},{"id":1124,"depth":472,"text":1127},{"id":1143,"depth":472,"text":1146},{"id":1183,"depth":475,"text":1186,"children":1466},[1467,1468,1469],{"id":1189,"depth":472,"text":1192},{"id":1208,"depth":472,"text":1211},{"id":1227,"depth":472,"text":1230},{"id":1249,"depth":475,"text":1252},{"id":1304,"depth":475,"text":1307},{"id":427,"depth":475,"text":427},"content:topics:nuxt:nitro-engine-deep-dive.md","topics/nuxt/nitro-engine-deep-dive.md","topics/nuxt/nitro-engine-deep-dive",{"_path":1477,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1478,"description":1479,"date":495,"topic":5,"author":11,"tags":1480,"image":1484,"featured":503,"readingTime":1485,"body":1486,"_type":484,"_id":2257,"_source":486,"_file":2258,"_stem":2259,"_extension":489},"/topics/nuxt/nuxt-rendering-modes-guide","Nuxt 渲染模式选择指南","从 SEO、性能、成本与一致性出发，系统对比 Nuxt 的 CSR/SSR/SSG/ISR（与预渲染）等模式，给出可执行的选型矩阵与落地架构建议。",[13,498,1481,1482,1483],"SSG","ISR","SEO","/images/topics/nuxt/rendering-modes.jpg",22,{"type":24,"children":1487,"toc":2240},[1488,1493,1498,1503,1531,1543,1546,1552,1557,1580,1585,1588,1594,1600,1605,1623,1628,1647,1653,1657,1670,1674,1687,1693,1697,1710,1714,1727,1733,1738,1751,1755,1768,1772,1785,1791,1795,1808,1812,1825,1828,1834,1839,2006,2009,2015,2020,2038,2043,2056,2059,2065,2070,2075,2098,2103,2121,2124,2130,2148,2151,2157,2210,2213,2217,2222],{"type":27,"tag":65,"props":1489,"children":1491},{"id":1490},"nuxt-渲染模式选择指南",[1492],{"type":32,"value":1478},{"type":27,"tag":28,"props":1494,"children":1495},{},[1496],{"type":32,"value":1497},"“到底要不要 SSR？”是 Nuxt 项目里最常见、也最容易吵起来的问题。",{"type":27,"tag":28,"props":1499,"children":1500},{},[1501],{"type":32,"value":1502},"原因是：渲染模式不是一个单点选择，它同时牵动：",{"type":27,"tag":40,"props":1504,"children":1505},{},[1506,1511,1516,1521,1526],{"type":27,"tag":44,"props":1507,"children":1508},{},[1509],{"type":32,"value":1510},"SEO（可索引内容是否直出）",{"type":27,"tag":44,"props":1512,"children":1513},{},[1514],{"type":32,"value":1515},"性能（TTFB/LCP/INP）",{"type":27,"tag":44,"props":1517,"children":1518},{},[1519],{"type":32,"value":1520},"成本（回源、算力、带宽）",{"type":27,"tag":44,"props":1522,"children":1523},{},[1524],{"type":32,"value":1525},"一致性（内容更新策略、缓存失效）",{"type":27,"tag":44,"props":1527,"children":1528},{},[1529],{"type":32,"value":1530},"工程复杂度（部署、观测、回滚）",{"type":27,"tag":28,"props":1532,"children":1533},{},[1534,1536,1541],{"type":32,"value":1535},"这篇文章给你一套",{"type":27,"tag":518,"props":1537,"children":1538},{},[1539],{"type":32,"value":1540},"可执行的选型方法",{"type":32,"value":1542},"：先定义目标，再选模式，最后给落地结构与检查清单。",{"type":27,"tag":598,"props":1544,"children":1545},{},[],{"type":27,"tag":65,"props":1547,"children":1549},{"id":1548},"_1-四个维度决定你的模式",[1550],{"type":32,"value":1551},"1. 四个维度，决定你的模式",{"type":27,"tag":28,"props":1553,"children":1554},{},[1555],{"type":32,"value":1556},"在做任何选择前，先回答四个问题：",{"type":27,"tag":364,"props":1558,"children":1559},{},[1560,1565,1570,1575],{"type":27,"tag":44,"props":1561,"children":1562},{},[1563],{"type":32,"value":1564},"页面是否需要 SEO？（搜索引擎是否必须看到正文）",{"type":27,"tag":44,"props":1566,"children":1567},{},[1568],{"type":32,"value":1569},"数据是否强一致？（用户态/支付/权限）",{"type":27,"tag":44,"props":1571,"children":1572},{},[1573],{"type":32,"value":1574},"更新频率如何？（发布频繁 vs 偶尔）",{"type":27,"tag":44,"props":1576,"children":1577},{},[1578],{"type":32,"value":1579},"流量模型是什么？（突发、平稳、长尾）",{"type":27,"tag":28,"props":1581,"children":1582},{},[1583],{"type":32,"value":1584},"这些问题比“SSR 快还是慢”更重要。",{"type":27,"tag":598,"props":1586,"children":1587},{},[],{"type":27,"tag":65,"props":1589,"children":1591},{"id":1590},"_2-主要模式概览csr-ssr-ssg-isr-预渲染",[1592],{"type":32,"value":1593},"2. 主要模式概览：CSR / SSR / SSG / ISR / 预渲染",{"type":27,"tag":726,"props":1595,"children":1597},{"id":1596},"_21-csr纯客户端渲染",[1598],{"type":32,"value":1599},"2.1 CSR（纯客户端渲染）",{"type":27,"tag":28,"props":1601,"children":1602},{},[1603],{"type":32,"value":1604},"特点：",{"type":27,"tag":40,"props":1606,"children":1607},{},[1608,1613,1618],{"type":27,"tag":44,"props":1609,"children":1610},{},[1611],{"type":32,"value":1612},"HTML 只有壳",{"type":27,"tag":44,"props":1614,"children":1615},{},[1616],{"type":32,"value":1617},"SEO 风险大（除非你不索引）",{"type":27,"tag":44,"props":1619,"children":1620},{},[1621],{"type":32,"value":1622},"首屏性能取决于 JS 与接口",{"type":27,"tag":28,"props":1624,"children":1625},{},[1626],{"type":32,"value":1627},"适用：",{"type":27,"tag":40,"props":1629,"children":1630},{},[1631,1636],{"type":27,"tag":44,"props":1632,"children":1633},{},[1634],{"type":32,"value":1635},"用户中心、后台、强交互工具",{"type":27,"tag":44,"props":1637,"children":1638},{},[1639,1641],{"type":32,"value":1640},"不需要索引或明确 ",{"type":27,"tag":152,"props":1642,"children":1644},{"className":1643},[],[1645],{"type":32,"value":1646},"noindex",{"type":27,"tag":726,"props":1648,"children":1650},{"id":1649},"_22-ssr服务端渲染",[1651],{"type":32,"value":1652},"2.2 SSR（服务端渲染）",{"type":27,"tag":28,"props":1654,"children":1655},{},[1656],{"type":32,"value":1604},{"type":27,"tag":40,"props":1658,"children":1659},{},[1660,1665],{"type":27,"tag":44,"props":1661,"children":1662},{},[1663],{"type":32,"value":1664},"首屏 HTML 直出，SEO 友好",{"type":27,"tag":44,"props":1666,"children":1667},{},[1668],{"type":32,"value":1669},"每次请求可能都需要回源（需要缓存）",{"type":27,"tag":28,"props":1671,"children":1672},{},[1673],{"type":32,"value":1627},{"type":27,"tag":40,"props":1675,"children":1676},{},[1677,1682],{"type":27,"tag":44,"props":1678,"children":1679},{},[1680],{"type":32,"value":1681},"内容需要 SEO，但数据强动态",{"type":27,"tag":44,"props":1683,"children":1684},{},[1685],{"type":32,"value":1686},"你有完善的缓存策略",{"type":27,"tag":726,"props":1688,"children":1690},{"id":1689},"_23-ssg静态生成",[1691],{"type":32,"value":1692},"2.3 SSG（静态生成）",{"type":27,"tag":28,"props":1694,"children":1695},{},[1696],{"type":32,"value":1604},{"type":27,"tag":40,"props":1698,"children":1699},{},[1700,1705],{"type":27,"tag":44,"props":1701,"children":1702},{},[1703],{"type":32,"value":1704},"性能与稳定性最好",{"type":27,"tag":44,"props":1706,"children":1707},{},[1708],{"type":32,"value":1709},"更新成本在“构建时”",{"type":27,"tag":28,"props":1711,"children":1712},{},[1713],{"type":32,"value":1627},{"type":27,"tag":40,"props":1715,"children":1716},{},[1717,1722],{"type":27,"tag":44,"props":1718,"children":1719},{},[1720],{"type":32,"value":1721},"内容站、文档站、营销页",{"type":27,"tag":44,"props":1723,"children":1724},{},[1725],{"type":32,"value":1726},"更新频率不高或可接受构建延迟",{"type":27,"tag":726,"props":1728,"children":1730},{"id":1729},"_24-isr增量静态再生按需生成",[1731],{"type":32,"value":1732},"2.4 ISR（增量静态再生/按需生成）",{"type":27,"tag":28,"props":1734,"children":1735},{},[1736],{"type":32,"value":1737},"在 Nuxt 体系里，ISR 的表达可能来自：",{"type":27,"tag":40,"props":1739,"children":1740},{},[1741,1746],{"type":27,"tag":44,"props":1742,"children":1743},{},[1744],{"type":32,"value":1745},"生成策略 + 缓存策略",{"type":27,"tag":44,"props":1747,"children":1748},{},[1749],{"type":32,"value":1750},"或配合边缘缓存与按需失效",{"type":27,"tag":28,"props":1752,"children":1753},{},[1754],{"type":32,"value":1604},{"type":27,"tag":40,"props":1756,"children":1757},{},[1758,1763],{"type":27,"tag":44,"props":1759,"children":1760},{},[1761],{"type":32,"value":1762},"静态化收益 + 可控更新",{"type":27,"tag":44,"props":1764,"children":1765},{},[1766],{"type":32,"value":1767},"需要你设计“失效与再生成”",{"type":27,"tag":28,"props":1769,"children":1770},{},[1771],{"type":32,"value":1627},{"type":27,"tag":40,"props":1773,"children":1774},{},[1775,1780],{"type":27,"tag":44,"props":1776,"children":1777},{},[1778],{"type":32,"value":1779},"内容更新频繁，但仍要 SEO",{"type":27,"tag":44,"props":1781,"children":1782},{},[1783],{"type":32,"value":1784},"你希望在高峰也保持稳定",{"type":27,"tag":726,"props":1786,"children":1788},{"id":1787},"_25-预渲染prerender",[1789],{"type":32,"value":1790},"2.5 预渲染（prerender）",{"type":27,"tag":28,"props":1792,"children":1793},{},[1794],{"type":32,"value":1604},{"type":27,"tag":40,"props":1796,"children":1797},{},[1798,1803],{"type":27,"tag":44,"props":1799,"children":1800},{},[1801],{"type":32,"value":1802},"对部分路由预先生成 HTML",{"type":27,"tag":44,"props":1804,"children":1805},{},[1806],{"type":32,"value":1807},"适合混合站点",{"type":27,"tag":28,"props":1809,"children":1810},{},[1811],{"type":32,"value":1627},{"type":27,"tag":40,"props":1813,"children":1814},{},[1815,1820],{"type":27,"tag":44,"props":1816,"children":1817},{},[1818],{"type":32,"value":1819},"首页/核心落地页需要 SEO",{"type":27,"tag":44,"props":1821,"children":1822},{},[1823],{"type":32,"value":1824},"工具页/用户页不需要 SEO",{"type":27,"tag":598,"props":1826,"children":1827},{},[],{"type":27,"tag":65,"props":1829,"children":1831},{"id":1830},"_3-选型矩阵可直接用",[1832],{"type":32,"value":1833},"3. 选型矩阵（可直接用）",{"type":27,"tag":28,"props":1835,"children":1836},{},[1837],{"type":32,"value":1838},"你可以按路由维度做选型，而不是全站一刀切。",{"type":27,"tag":1840,"props":1841,"children":1842},"table",{},[1843,1871],{"type":27,"tag":1844,"props":1845,"children":1846},"thead",{},[1847],{"type":27,"tag":1848,"props":1849,"children":1850},"tr",{},[1851,1857,1861,1866],{"type":27,"tag":1852,"props":1853,"children":1854},"th",{},[1855],{"type":32,"value":1856},"页面类型",{"type":27,"tag":1852,"props":1858,"children":1859},{},[1860],{"type":32,"value":1483},{"type":27,"tag":1852,"props":1862,"children":1863},{},[1864],{"type":32,"value":1865},"更新频率",{"type":27,"tag":1852,"props":1867,"children":1868},{},[1869],{"type":32,"value":1870},"推荐",{"type":27,"tag":1872,"props":1873,"children":1874},"tbody",{},[1875,1899,1920,1941,1962,1984],{"type":27,"tag":1848,"props":1876,"children":1877},{},[1878,1884,1889,1894],{"type":27,"tag":1879,"props":1880,"children":1881},"td",{},[1882],{"type":32,"value":1883},"文章详情",{"type":27,"tag":1879,"props":1885,"children":1886},{},[1887],{"type":32,"value":1888},"高",{"type":27,"tag":1879,"props":1890,"children":1891},{},[1892],{"type":32,"value":1893},"中",{"type":27,"tag":1879,"props":1895,"children":1896},{},[1897],{"type":32,"value":1898},"SSG/ISR",{"type":27,"tag":1848,"props":1900,"children":1901},{},[1902,1907,1911,1915],{"type":27,"tag":1879,"props":1903,"children":1904},{},[1905],{"type":32,"value":1906},"文章列表",{"type":27,"tag":1879,"props":1908,"children":1909},{},[1910],{"type":32,"value":1888},{"type":27,"tag":1879,"props":1912,"children":1913},{},[1914],{"type":32,"value":1893},{"type":27,"tag":1879,"props":1916,"children":1917},{},[1918],{"type":32,"value":1919},"SSG/ISR（注意聚合页）",{"type":27,"tag":1848,"props":1921,"children":1922},{},[1923,1928,1932,1936],{"type":27,"tag":1879,"props":1924,"children":1925},{},[1926],{"type":32,"value":1927},"产品详情",{"type":27,"tag":1879,"props":1929,"children":1930},{},[1931],{"type":32,"value":1888},{"type":27,"tag":1879,"props":1933,"children":1934},{},[1935],{"type":32,"value":1888},{"type":27,"tag":1879,"props":1937,"children":1938},{},[1939],{"type":32,"value":1940},"ISR/SSR（配缓存）",{"type":27,"tag":1848,"props":1942,"children":1943},{},[1944,1949,1953,1957],{"type":27,"tag":1879,"props":1945,"children":1946},{},[1947],{"type":32,"value":1948},"搜索结果",{"type":27,"tag":1879,"props":1950,"children":1951},{},[1952],{"type":32,"value":1893},{"type":27,"tag":1879,"props":1954,"children":1955},{},[1956],{"type":32,"value":1888},{"type":27,"tag":1879,"props":1958,"children":1959},{},[1960],{"type":32,"value":1961},"SSR/CSR（配 noindex）",{"type":27,"tag":1848,"props":1963,"children":1964},{},[1965,1970,1975,1979],{"type":27,"tag":1879,"props":1966,"children":1967},{},[1968],{"type":32,"value":1969},"用户中心",{"type":27,"tag":1879,"props":1971,"children":1972},{},[1973],{"type":32,"value":1974},"低",{"type":27,"tag":1879,"props":1976,"children":1977},{},[1978],{"type":32,"value":1888},{"type":27,"tag":1879,"props":1980,"children":1981},{},[1982],{"type":32,"value":1983},"CSR",{"type":27,"tag":1848,"props":1985,"children":1986},{},[1987,1992,1997,2001],{"type":27,"tag":1879,"props":1988,"children":1989},{},[1990],{"type":32,"value":1991},"工具页",{"type":27,"tag":1879,"props":1993,"children":1994},{},[1995],{"type":32,"value":1996},"低/中",{"type":27,"tag":1879,"props":1998,"children":1999},{},[2000],{"type":32,"value":1893},{"type":27,"tag":1879,"props":2002,"children":2003},{},[2004],{"type":32,"value":2005},"CSR + 预渲染核心路由",{"type":27,"tag":598,"props":2007,"children":2008},{},[],{"type":27,"tag":65,"props":2010,"children":2012},{"id":2011},"_4-混合渲染真正的生产最优解",[2013],{"type":32,"value":2014},"4. 混合渲染：真正的生产最优解",{"type":27,"tag":28,"props":2016,"children":2017},{},[2018],{"type":32,"value":2019},"生产上最常见的模式是混合：",{"type":27,"tag":40,"props":2021,"children":2022},{},[2023,2028,2033],{"type":27,"tag":44,"props":2024,"children":2025},{},[2026],{"type":32,"value":2027},"公共内容：静态化（SSG/ISR）+ CDN",{"type":27,"tag":44,"props":2029,"children":2030},{},[2031],{"type":32,"value":2032},"用户态内容：CSR 或 SSR（private/no-store）",{"type":27,"tag":44,"props":2034,"children":2035},{},[2036],{"type":32,"value":2037},"关键落地页：预渲染",{"type":27,"tag":28,"props":2039,"children":2040},{},[2041],{"type":32,"value":2042},"好处：",{"type":27,"tag":40,"props":2044,"children":2045},{},[2046,2051],{"type":27,"tag":44,"props":2047,"children":2048},{},[2049],{"type":32,"value":2050},"SEO 与性能兼得",{"type":27,"tag":44,"props":2052,"children":2053},{},[2054],{"type":32,"value":2055},"成本可控",{"type":27,"tag":598,"props":2057,"children":2058},{},[],{"type":27,"tag":65,"props":2060,"children":2062},{"id":2061},"_5-缓存与失效模式落地的关键",[2063],{"type":32,"value":2064},"5. 缓存与失效：模式落地的关键",{"type":27,"tag":28,"props":2066,"children":2067},{},[2068],{"type":32,"value":2069},"无论你选 SSR 还是 ISR，本质都离不开缓存。",{"type":27,"tag":28,"props":2071,"children":2072},{},[2073],{"type":32,"value":2074},"建议把缓存分层：",{"type":27,"tag":40,"props":2076,"children":2077},{},[2078,2083,2088,2093],{"type":27,"tag":44,"props":2079,"children":2080},{},[2081],{"type":32,"value":2082},"浏览器",{"type":27,"tag":44,"props":2084,"children":2085},{},[2086],{"type":32,"value":2087},"CDN",{"type":27,"tag":44,"props":2089,"children":2090},{},[2091],{"type":32,"value":2092},"应用侧（server runtime）",{"type":27,"tag":44,"props":2094,"children":2095},{},[2096],{"type":32,"value":2097},"数据侧（Redis/DB）",{"type":27,"tag":28,"props":2099,"children":2100},{},[2101],{"type":32,"value":2102},"并给每条路由明确：",{"type":27,"tag":40,"props":2104,"children":2105},{},[2106,2111,2116],{"type":27,"tag":44,"props":2107,"children":2108},{},[2109],{"type":32,"value":2110},"是否 public/private",{"type":27,"tag":44,"props":2112,"children":2113},{},[2114],{"type":32,"value":2115},"TTL 多久",{"type":27,"tag":44,"props":2117,"children":2118},{},[2119],{"type":32,"value":2120},"写操作后如何失效",{"type":27,"tag":598,"props":2122,"children":2123},{},[],{"type":27,"tag":65,"props":2125,"children":2127},{"id":2126},"_6-常见误区",[2128],{"type":32,"value":2129},"6. 常见误区",{"type":27,"tag":40,"props":2131,"children":2132},{},[2133,2138,2143],{"type":27,"tag":44,"props":2134,"children":2135},{},[2136],{"type":32,"value":2137},"“SSR 一定更快”：不一定，TTFB 可能更慢；LCP 受资源与主线程影响更大",{"type":27,"tag":44,"props":2139,"children":2140},{},[2141],{"type":32,"value":2142},"“SSG 一定更好”：构建成本与发布延迟可能无法接受",{"type":27,"tag":44,"props":2144,"children":2145},{},[2146],{"type":32,"value":2147},"“全站一个模式最省事”：短期省事，长期很难优化与扩展",{"type":27,"tag":598,"props":2149,"children":2150},{},[],{"type":27,"tag":65,"props":2152,"children":2154},{"id":2153},"_7-上线检查清单",[2155],{"type":32,"value":2156},"7. 上线检查清单",{"type":27,"tag":40,"props":2158,"children":2161},{"className":2159},[2160],"contains-task-list",[2162,2174,2183,2192,2201],{"type":27,"tag":44,"props":2163,"children":2166},{"className":2164},[2165],"task-list-item",[2167,2172],{"type":27,"tag":2168,"props":2169,"children":2171},"input",{"disabled":503,"type":2170},"checkbox",[],{"type":32,"value":2173}," 按路由明确 SEO 需求（哪些可索引）",{"type":27,"tag":44,"props":2175,"children":2177},{"className":2176},[2165],[2178,2181],{"type":27,"tag":2168,"props":2179,"children":2180},{"disabled":503,"type":2170},[],{"type":32,"value":2182}," 用户态页面是否 private/no-store",{"type":27,"tag":44,"props":2184,"children":2186},{"className":2185},[2165],[2187,2190],{"type":27,"tag":2168,"props":2188,"children":2189},{"disabled":503,"type":2170},[],{"type":32,"value":2191}," 公共内容是否走 CDN 并有合理 TTL",{"type":27,"tag":44,"props":2193,"children":2195},{"className":2194},[2165],[2196,2199],{"type":27,"tag":2168,"props":2197,"children":2198},{"disabled":503,"type":2170},[],{"type":32,"value":2200}," 更新路径是否有失效机制（发布事件）",{"type":27,"tag":44,"props":2202,"children":2204},{"className":2203},[2165],[2205,2208],{"type":27,"tag":2168,"props":2206,"children":2207},{"disabled":503,"type":2170},[],{"type":32,"value":2209}," 是否有 RUM/日志来验证效果",{"type":27,"tag":598,"props":2211,"children":2212},{},[],{"type":27,"tag":65,"props":2214,"children":2215},{"id":427},[2216],{"type":32,"value":427},{"type":27,"tag":28,"props":2218,"children":2219},{},[2220],{"type":32,"value":2221},"Nuxt 渲染模式选型的正确做法是：",{"type":27,"tag":40,"props":2223,"children":2224},{},[2225,2230,2235],{"type":27,"tag":44,"props":2226,"children":2227},{},[2228],{"type":32,"value":2229},"以“页面类型”而不是“站点整体”做选择",{"type":27,"tag":44,"props":2231,"children":2232},{},[2233],{"type":32,"value":2234},"把缓存与失效当成一等公民",{"type":27,"tag":44,"props":2236,"children":2237},{},[2238],{"type":32,"value":2239},"用观测验证，而不是凭感觉",{"title":7,"searchDepth":472,"depth":472,"links":2241},[2242,2243,2244,2251,2252,2253,2254,2255,2256],{"id":1490,"depth":475,"text":1478},{"id":1548,"depth":475,"text":1551},{"id":1590,"depth":475,"text":1593,"children":2245},[2246,2247,2248,2249,2250],{"id":1596,"depth":472,"text":1599},{"id":1649,"depth":472,"text":1652},{"id":1689,"depth":472,"text":1692},{"id":1729,"depth":472,"text":1732},{"id":1787,"depth":472,"text":1790},{"id":1830,"depth":475,"text":1833},{"id":2011,"depth":475,"text":2014},{"id":2061,"depth":475,"text":2064},{"id":2126,"depth":475,"text":2129},{"id":2153,"depth":475,"text":2156},{"id":427,"depth":475,"text":427},"content:topics:nuxt:nuxt-rendering-modes-guide.md","topics/nuxt/nuxt-rendering-modes-guide.md","topics/nuxt/nuxt-rendering-modes-guide",{"_path":2261,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2262,"description":2263,"date":2264,"topic":5,"author":11,"tags":2265,"image":2270,"featured":503,"readingTime":2271,"body":2272,"_type":484,"_id":2797,"_source":486,"_file":2798,"_stem":2799,"_extension":489},"/topics/nuxt/nuxt4-major-updates-overview","Nuxt 4 重大更新全面解读：架构升级与开发体验革新","深入解析 Nuxt 4 的重大更新，包括新目录结构、Nitro 2.0 引擎、兼容性层变化、性能优化等核心改进，帮助开发者全面了解新版本特性并做好升级准备。","2026-01-18",[2266,2267,498,2268,2269],"Nuxt 4","Vue","全栈框架","版本升级","/images/topics/nuxt/nuxt4-features-overview.jpg",16,{"type":24,"children":2273,"toc":2758},[2274,2280,2286,2291,2296,2302,2308,2313,2321,2329,2337,2343,2348,2359,2365,2374,2380,2386,2391,2400,2406,2415,2421,2430,2436,2442,2451,2457,2466,2472,2481,2487,2493,2502,2508,2517,2523,2534,2543,2549,2555,2564,2570,2579,2585,2594,2600,2606,2615,2621,2630,2636,2642,2652,2658,2667,2673,2678,2683,2688,2706,2709,2714],{"type":27,"tag":65,"props":2275,"children":2277},{"id":2276},"nuxt-4-重大更新全面解读",[2278],{"type":32,"value":2279},"Nuxt 4 重大更新全面解读",{"type":27,"tag":65,"props":2281,"children":2283},{"id":2282},"引言nuxt-的又一次进化",[2284],{"type":32,"value":2285},"引言：Nuxt 的又一次进化",{"type":27,"tag":28,"props":2287,"children":2288},{},[2289],{"type":32,"value":2290},"Nuxt 4 的发布标志着这个 Vue 生态中最受欢迎的全栈框架又迈入了新阶段。从 Nuxt 2 到 Nuxt 3 是一次彻底重写，而 Nuxt 3 到 Nuxt 4 则是在成熟架构上的精进打磨——更清晰的目录结构、更强大的引擎、更好的开发体验。",{"type":27,"tag":28,"props":2292,"children":2293},{},[2294],{"type":32,"value":2295},"这篇文章将全面解读 Nuxt 4 的核心变化，帮助你理解这些改动背后的设计理念，以及它们将如何影响你的日常开发。",{"type":27,"tag":65,"props":2297,"children":2299},{"id":2298},"第一部分新目录结构",[2300],{"type":32,"value":2301},"第一部分：新目录结构",{"type":27,"tag":726,"props":2303,"children":2305},{"id":2304},"_11-从扁平到分层",[2306],{"type":32,"value":2307},"1.1 从扁平到分层",{"type":27,"tag":28,"props":2309,"children":2310},{},[2311],{"type":32,"value":2312},"Nuxt 4 引入了新的目录结构，将应用代码与配置分离：",{"type":27,"tag":204,"props":2314,"children":2316},{"code":2315},"# 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",[2317],{"type":27,"tag":152,"props":2318,"children":2319},{"__ignoreMap":7},[2320],{"type":32,"value":2315},{"type":27,"tag":28,"props":2322,"children":2323},{},[2324],{"type":27,"tag":518,"props":2325,"children":2326},{},[2327],{"type":32,"value":2328},"为什么这样设计？",{"type":27,"tag":204,"props":2330,"children":2332},{"code":2331},"┌────────────────────────────────────────────────────────────┐\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",[2333],{"type":27,"tag":152,"props":2334,"children":2335},{"__ignoreMap":7},[2336],{"type":32,"value":2331},{"type":27,"tag":726,"props":2338,"children":2340},{"id":2339},"_12-向后兼容",[2341],{"type":32,"value":2342},"1.2 向后兼容",{"type":27,"tag":28,"props":2344,"children":2345},{},[2346],{"type":32,"value":2347},"Nuxt 4 提供了兼容性选项，允许继续使用旧目录结构：",{"type":27,"tag":204,"props":2349,"children":2354},{"code":2350,"language":2351,"meta":7,"className":2352},"// 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","typescript",[2353],"language-typescript",[2355],{"type":27,"tag":152,"props":2356,"children":2357},{"__ignoreMap":7},[2358],{"type":32,"value":2350},{"type":27,"tag":726,"props":2360,"children":2362},{"id":2361},"_13-appconfigts-变化",[2363],{"type":32,"value":2364},"1.3 app.config.ts 变化",{"type":27,"tag":204,"props":2366,"children":2369},{"code":2367,"language":2351,"meta":7,"className":2368},"// 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",[2353],[2370],{"type":27,"tag":152,"props":2371,"children":2372},{"__ignoreMap":7},[2373],{"type":32,"value":2367},{"type":27,"tag":65,"props":2375,"children":2377},{"id":2376},"第二部分nitro-20-引擎升级",[2378],{"type":32,"value":2379},"第二部分：Nitro 2.0 引擎升级",{"type":27,"tag":726,"props":2381,"children":2383},{"id":2382},"_21-性能提升",[2384],{"type":32,"value":2385},"2.1 性能提升",{"type":27,"tag":28,"props":2387,"children":2388},{},[2389],{"type":32,"value":2390},"Nitro 2.0 带来了显著的性能改进：",{"type":27,"tag":204,"props":2392,"children":2395},{"code":2393,"language":2351,"meta":7,"className":2394},"// 冷启动时间优化\n// Nitro 1.x: ~150ms\n// Nitro 2.0: ~80ms (约 47% 提升)\n\n// 内存占用优化\n// 同样的应用，内存占用减少约 20%\n\n// 原因：\n// - 更高效的模块加载\n// - 优化的树摇（tree-shaking）\n// - 减少运行时开销\n",[2353],[2396],{"type":27,"tag":152,"props":2397,"children":2398},{"__ignoreMap":7},[2399],{"type":32,"value":2393},{"type":27,"tag":726,"props":2401,"children":2403},{"id":2402},"_22-新的路由系统",[2404],{"type":32,"value":2405},"2.2 新的路由系统",{"type":27,"tag":204,"props":2407,"children":2410},{"code":2408,"language":2351,"meta":7,"className":2409},"// 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",[2353],[2411],{"type":27,"tag":152,"props":2412,"children":2413},{"__ignoreMap":7},[2414],{"type":32,"value":2408},{"type":27,"tag":726,"props":2416,"children":2418},{"id":2417},"_23-增强的数据获取",[2419],{"type":32,"value":2420},"2.3 增强的数据获取",{"type":27,"tag":204,"props":2422,"children":2425},{"code":2423,"language":2351,"meta":7,"className":2424},"// 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",[2353],[2426],{"type":27,"tag":152,"props":2427,"children":2428},{"__ignoreMap":7},[2429],{"type":32,"value":2423},{"type":27,"tag":65,"props":2431,"children":2433},{"id":2432},"第三部分兼容性层变化",[2434],{"type":32,"value":2435},"第三部分：兼容性层变化",{"type":27,"tag":726,"props":2437,"children":2439},{"id":2438},"_31-移除的废弃-api",[2440],{"type":32,"value":2441},"3.1 移除的废弃 API",{"type":27,"tag":204,"props":2443,"children":2446},{"code":2444,"language":2351,"meta":7,"className":2445},"// 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",[2353],[2447],{"type":27,"tag":152,"props":2448,"children":2449},{"__ignoreMap":7},[2450],{"type":32,"value":2444},{"type":27,"tag":726,"props":2452,"children":2454},{"id":2453},"_32-类型系统改进",[2455],{"type":32,"value":2456},"3.2 类型系统改进",{"type":27,"tag":204,"props":2458,"children":2461},{"code":2459,"language":2351,"meta":7,"className":2460},"// 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",[2353],[2462],{"type":27,"tag":152,"props":2463,"children":2464},{"__ignoreMap":7},[2465],{"type":32,"value":2459},{"type":27,"tag":726,"props":2467,"children":2469},{"id":2468},"_33-useasyncdata-改进",[2470],{"type":32,"value":2471},"3.3 useAsyncData 改进",{"type":27,"tag":204,"props":2473,"children":2476},{"code":2474,"language":2351,"meta":7,"className":2475},"// 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",[2353],[2477],{"type":27,"tag":152,"props":2478,"children":2479},{"__ignoreMap":7},[2480],{"type":32,"value":2474},{"type":27,"tag":65,"props":2482,"children":2484},{"id":2483},"第四部分开发体验改进",[2485],{"type":32,"value":2486},"第四部分：开发体验改进",{"type":27,"tag":726,"props":2488,"children":2490},{"id":2489},"_41-nuxt-devtools-增强",[2491],{"type":32,"value":2492},"4.1 Nuxt DevTools 增强",{"type":27,"tag":204,"props":2494,"children":2497},{"code":2495,"language":2351,"meta":7,"className":2496},"// 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",[2353],[2498],{"type":27,"tag":152,"props":2499,"children":2500},{"__ignoreMap":7},[2501],{"type":32,"value":2495},{"type":27,"tag":726,"props":2503,"children":2505},{"id":2504},"_42-热更新优化",[2506],{"type":32,"value":2507},"4.2 热更新优化",{"type":27,"tag":204,"props":2509,"children":2512},{"code":2510,"language":2351,"meta":7,"className":2511},"// 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",[2353],[2513],{"type":27,"tag":152,"props":2514,"children":2515},{"__ignoreMap":7},[2516],{"type":32,"value":2510},{"type":27,"tag":726,"props":2518,"children":2520},{"id":2519},"_43-错误处理增强",[2521],{"type":32,"value":2522},"4.3 错误处理增强",{"type":27,"tag":204,"props":2524,"children":2529},{"code":2525,"language":2526,"meta":7,"className":2527},"\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","vue",[2528],"language-vue",[2530],{"type":27,"tag":152,"props":2531,"children":2532},{"__ignoreMap":7},[2533],{"type":32,"value":2525},{"type":27,"tag":204,"props":2535,"children":2538},{"code":2536,"language":2351,"meta":7,"className":2537},"// 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",[2353],[2539],{"type":27,"tag":152,"props":2540,"children":2541},{"__ignoreMap":7},[2542],{"type":32,"value":2536},{"type":27,"tag":65,"props":2544,"children":2546},{"id":2545},"第五部分性能优化特性",[2547],{"type":32,"value":2548},"第五部分：性能优化特性",{"type":27,"tag":726,"props":2550,"children":2552},{"id":2551},"_51-更智能的代码分割",[2553],{"type":32,"value":2554},"5.1 更智能的代码分割",{"type":27,"tag":204,"props":2556,"children":2559},{"code":2557,"language":2351,"meta":7,"className":2558},"// 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",[2353],[2560],{"type":27,"tag":152,"props":2561,"children":2562},{"__ignoreMap":7},[2563],{"type":32,"value":2557},{"type":27,"tag":726,"props":2565,"children":2567},{"id":2566},"_52-图片优化增强",[2568],{"type":32,"value":2569},"5.2 图片优化增强",{"type":27,"tag":204,"props":2571,"children":2574},{"code":2572,"language":2526,"meta":7,"className":2573},"\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",[2528],[2575],{"type":27,"tag":152,"props":2576,"children":2577},{"__ignoreMap":7},[2578],{"type":32,"value":2572},{"type":27,"tag":726,"props":2580,"children":2582},{"id":2581},"_53-服务端渲染优化",[2583],{"type":32,"value":2584},"5.3 服务端渲染优化",{"type":27,"tag":204,"props":2586,"children":2589},{"code":2587,"language":2351,"meta":7,"className":2588},"// 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",[2353],[2590],{"type":27,"tag":152,"props":2591,"children":2592},{"__ignoreMap":7},[2593],{"type":32,"value":2587},{"type":27,"tag":65,"props":2595,"children":2597},{"id":2596},"第六部分模块生态更新",[2598],{"type":32,"value":2599},"第六部分：模块生态更新",{"type":27,"tag":726,"props":2601,"children":2603},{"id":2602},"_61-官方模块适配",[2604],{"type":32,"value":2605},"6.1 官方模块适配",{"type":27,"tag":204,"props":2607,"children":2610},{"code":2608,"language":2351,"meta":7,"className":2609},"// 主要官方模块的 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",[2353],[2611],{"type":27,"tag":152,"props":2612,"children":2613},{"__ignoreMap":7},[2614],{"type":32,"value":2608},{"type":27,"tag":726,"props":2616,"children":2618},{"id":2617},"_62-创建-nuxt-4-兼容模块",[2619],{"type":32,"value":2620},"6.2 创建 Nuxt 4 兼容模块",{"type":27,"tag":204,"props":2622,"children":2625},{"code":2623,"language":2351,"meta":7,"className":2624},"// 模块开发的新约定\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",[2353],[2626],{"type":27,"tag":152,"props":2627,"children":2628},{"__ignoreMap":7},[2629],{"type":32,"value":2623},{"type":27,"tag":65,"props":2631,"children":2633},{"id":2632},"第七部分迁移准备",[2634],{"type":32,"value":2635},"第七部分：迁移准备",{"type":27,"tag":726,"props":2637,"children":2639},{"id":2638},"_71-兼容性检查清单",[2640],{"type":32,"value":2641},"7.1 兼容性检查清单",{"type":27,"tag":204,"props":2643,"children":2647},{"code":2644,"language":484,"meta":7,"className":2645},"## 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",[2646],"language-markdown",[2648],{"type":27,"tag":152,"props":2649,"children":2650},{"__ignoreMap":7},[2651],{"type":32,"value":2644},{"type":27,"tag":726,"props":2653,"children":2655},{"id":2654},"_72-渐进式升级路径",[2656],{"type":32,"value":2657},"7.2 渐进式升级路径",{"type":27,"tag":204,"props":2659,"children":2662},{"code":2660,"language":2351,"meta":7,"className":2661},"// 使用 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",[2353],[2663],{"type":27,"tag":152,"props":2664,"children":2665},{"__ignoreMap":7},[2666],{"type":32,"value":2660},{"type":27,"tag":65,"props":2668,"children":2670},{"id":2669},"结语稳步前进的进化",[2671],{"type":32,"value":2672},"结语：稳步前进的进化",{"type":27,"tag":28,"props":2674,"children":2675},{},[2676],{"type":32,"value":2677},"Nuxt 4 不是一次颠覆性的重写，而是在 Nuxt 3 坚实基础上的持续改进。新的目录结构带来更好的组织性，Nitro 2.0 带来更好的性能，增强的类型系统带来更好的开发体验。",{"type":27,"tag":28,"props":2679,"children":2680},{},[2681],{"type":32,"value":2682},"对于 Nuxt 3 用户来说，升级路径相对平滑。核心概念没有变化，熟悉的 API 依然工作。Nuxt 团队显然吸取了 Nuxt 2 到 Nuxt 3 升级的经验，这次提供了更友好的迁移体验。",{"type":27,"tag":28,"props":2684,"children":2685},{},[2686],{"type":32,"value":2687},"如果你正在考虑是否升级，建议：",{"type":27,"tag":40,"props":2689,"children":2690},{},[2691,2696,2701],{"type":27,"tag":44,"props":2692,"children":2693},{},[2694],{"type":32,"value":2695},"新项目直接使用 Nuxt 4",{"type":27,"tag":44,"props":2697,"children":2698},{},[2699],{"type":32,"value":2700},"现有项目评估迁移成本后决定",{"type":27,"tag":44,"props":2702,"children":2703},{},[2704],{"type":32,"value":2705},"关注官方迁移指南的更新",{"type":27,"tag":598,"props":2707,"children":2708},{},[],{"type":27,"tag":65,"props":2710,"children":2712},{"id":2711},"参考资源",[2713],{"type":32,"value":2711},{"type":27,"tag":40,"props":2715,"children":2716},{},[2717,2728,2738,2748],{"type":27,"tag":44,"props":2718,"children":2719},{},[2720],{"type":27,"tag":447,"props":2721,"children":2725},{"href":2722,"rel":2723},"https://nuxt.com/blog/v4",[2724],"nofollow",[2726],{"type":32,"value":2727},"Nuxt 4 官方公告",{"type":27,"tag":44,"props":2729,"children":2730},{},[2731],{"type":27,"tag":447,"props":2732,"children":2735},{"href":2733,"rel":2734},"https://nuxt.com/docs/migration/upgrade",[2724],[2736],{"type":32,"value":2737},"Nuxt 4 迁移指南",{"type":27,"tag":44,"props":2739,"children":2740},{},[2741],{"type":27,"tag":447,"props":2742,"children":2745},{"href":2743,"rel":2744},"https://nitro.unjs.io/changelog",[2724],[2746],{"type":32,"value":2747},"Nitro 2.0 更新日志",{"type":27,"tag":44,"props":2749,"children":2750},{},[2751],{"type":27,"tag":447,"props":2752,"children":2755},{"href":2753,"rel":2754},"https://github.com/nuxt/nuxt/issues",[2724],[2756],{"type":32,"value":2757},"Nuxt 路线图",{"title":7,"searchDepth":472,"depth":472,"links":2759},[2760,2761,2762,2767,2772,2777,2782,2787,2791,2795,2796],{"id":2276,"depth":475,"text":2279},{"id":2282,"depth":475,"text":2285},{"id":2298,"depth":475,"text":2301,"children":2763},[2764,2765,2766],{"id":2304,"depth":472,"text":2307},{"id":2339,"depth":472,"text":2342},{"id":2361,"depth":472,"text":2364},{"id":2376,"depth":475,"text":2379,"children":2768},[2769,2770,2771],{"id":2382,"depth":472,"text":2385},{"id":2402,"depth":472,"text":2405},{"id":2417,"depth":472,"text":2420},{"id":2432,"depth":475,"text":2435,"children":2773},[2774,2775,2776],{"id":2438,"depth":472,"text":2441},{"id":2453,"depth":472,"text":2456},{"id":2468,"depth":472,"text":2471},{"id":2483,"depth":475,"text":2486,"children":2778},[2779,2780,2781],{"id":2489,"depth":472,"text":2492},{"id":2504,"depth":472,"text":2507},{"id":2519,"depth":472,"text":2522},{"id":2545,"depth":475,"text":2548,"children":2783},[2784,2785,2786],{"id":2551,"depth":472,"text":2554},{"id":2566,"depth":472,"text":2569},{"id":2581,"depth":472,"text":2584},{"id":2596,"depth":475,"text":2599,"children":2788},[2789,2790],{"id":2602,"depth":472,"text":2605},{"id":2617,"depth":472,"text":2620},{"id":2632,"depth":475,"text":2635,"children":2792},[2793,2794],{"id":2638,"depth":472,"text":2641},{"id":2654,"depth":472,"text":2657},{"id":2669,"depth":475,"text":2672},{"id":2711,"depth":475,"text":2711},"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":2801,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":2802,"_type":484,"_id":485,"_source":486,"_file":487,"_stem":488,"_extension":489},[13,14,15,16,17],{"type":24,"children":2803,"toc":3156},[2804,2808,2812,2827,2831,2835,2839,2843,2862,2866,2870,2874,2889,2893,2897,2919,2923,2938,2942,2950,2954,2958,2962,2966,2981,2985,3000,3004,3008,3012,3027,3031,3035,3039,3058,3062,3066,3070,3089,3093,3097,3120,3124,3128,3132],{"type":27,"tag":28,"props":2805,"children":2806},{},[2807],{"type":32,"value":33},{"type":27,"tag":28,"props":2809,"children":2810},{},[2811],{"type":32,"value":38},{"type":27,"tag":40,"props":2813,"children":2814},{},[2815,2819,2823],{"type":27,"tag":44,"props":2816,"children":2817},{},[2818],{"type":32,"value":48},{"type":27,"tag":44,"props":2820,"children":2821},{},[2822],{"type":32,"value":53},{"type":27,"tag":44,"props":2824,"children":2825},{},[2826],{"type":32,"value":58},{"type":27,"tag":28,"props":2828,"children":2829},{},[2830],{"type":32,"value":63},{"type":27,"tag":65,"props":2832,"children":2833},{"id":67},[2834],{"type":32,"value":67},{"type":27,"tag":28,"props":2836,"children":2837},{},[2838],{"type":32,"value":74},{"type":27,"tag":28,"props":2840,"children":2841},{},[2842],{"type":32,"value":79},{"type":27,"tag":40,"props":2844,"children":2845},{},[2846,2850,2854,2858],{"type":27,"tag":44,"props":2847,"children":2848},{},[2849],{"type":32,"value":87},{"type":27,"tag":44,"props":2851,"children":2852},{},[2853],{"type":32,"value":92},{"type":27,"tag":44,"props":2855,"children":2856},{},[2857],{"type":32,"value":97},{"type":27,"tag":44,"props":2859,"children":2860},{},[2861],{"type":32,"value":102},{"type":27,"tag":28,"props":2863,"children":2864},{},[2865],{"type":32,"value":107},{"type":27,"tag":65,"props":2867,"children":2868},{"id":110},[2869],{"type":32,"value":110},{"type":27,"tag":28,"props":2871,"children":2872},{},[2873],{"type":32,"value":117},{"type":27,"tag":40,"props":2875,"children":2876},{},[2877,2881,2885],{"type":27,"tag":44,"props":2878,"children":2879},{},[2880],{"type":32,"value":125},{"type":27,"tag":44,"props":2882,"children":2883},{},[2884],{"type":32,"value":130},{"type":27,"tag":44,"props":2886,"children":2887},{},[2888],{"type":32,"value":135},{"type":27,"tag":28,"props":2890,"children":2891},{},[2892],{"type":32,"value":140},{"type":27,"tag":65,"props":2894,"children":2895},{"id":143},[2896],{"type":32,"value":143},{"type":27,"tag":28,"props":2898,"children":2899},{},[2900,2901,2906,2907,2912,2913,2918],{"type":32,"value":150},{"type":27,"tag":152,"props":2902,"children":2904},{"className":2903},[],[2905],{"type":32,"value":157},{"type":32,"value":159},{"type":27,"tag":152,"props":2908,"children":2910},{"className":2909},[],[2911],{"type":32,"value":165},{"type":32,"value":159},{"type":27,"tag":152,"props":2914,"children":2916},{"className":2915},[],[2917],{"type":32,"value":172},{"type":32,"value":174},{"type":27,"tag":28,"props":2920,"children":2921},{},[2922],{"type":32,"value":179},{"type":27,"tag":40,"props":2924,"children":2925},{},[2926,2930,2934],{"type":27,"tag":44,"props":2927,"children":2928},{},[2929],{"type":32,"value":187},{"type":27,"tag":44,"props":2931,"children":2932},{},[2933],{"type":32,"value":192},{"type":27,"tag":44,"props":2935,"children":2936},{},[2937],{"type":32,"value":197},{"type":27,"tag":28,"props":2939,"children":2940},{},[2941],{"type":32,"value":202},{"type":27,"tag":204,"props":2943,"children":2945},{"className":2944,"code":208,"language":209,"meta":7},[207],[2946],{"type":27,"tag":152,"props":2947,"children":2948},{"__ignoreMap":7},[2949],{"type":32,"value":208},{"type":27,"tag":28,"props":2951,"children":2952},{},[2953],{"type":32,"value":219},{"type":27,"tag":65,"props":2955,"children":2956},{"id":222},[2957],{"type":32,"value":222},{"type":27,"tag":28,"props":2959,"children":2960},{},[2961],{"type":32,"value":229},{"type":27,"tag":28,"props":2963,"children":2964},{},[2965],{"type":32,"value":234},{"type":27,"tag":40,"props":2967,"children":2968},{},[2969,2973,2977],{"type":27,"tag":44,"props":2970,"children":2971},{},[2972],{"type":32,"value":242},{"type":27,"tag":44,"props":2974,"children":2975},{},[2976],{"type":32,"value":247},{"type":27,"tag":44,"props":2978,"children":2979},{},[2980],{"type":32,"value":252},{"type":27,"tag":28,"props":2982,"children":2983},{},[2984],{"type":32,"value":257},{"type":27,"tag":40,"props":2986,"children":2987},{},[2988,2992,2996],{"type":27,"tag":44,"props":2989,"children":2990},{},[2991],{"type":32,"value":265},{"type":27,"tag":44,"props":2993,"children":2994},{},[2995],{"type":32,"value":270},{"type":27,"tag":44,"props":2997,"children":2998},{},[2999],{"type":32,"value":275},{"type":27,"tag":65,"props":3001,"children":3002},{"id":278},[3003],{"type":32,"value":278},{"type":27,"tag":28,"props":3005,"children":3006},{},[3007],{"type":32,"value":285},{"type":27,"tag":28,"props":3009,"children":3010},{},[3011],{"type":32,"value":290},{"type":27,"tag":40,"props":3013,"children":3014},{},[3015,3019,3023],{"type":27,"tag":44,"props":3016,"children":3017},{},[3018],{"type":32,"value":298},{"type":27,"tag":44,"props":3020,"children":3021},{},[3022],{"type":32,"value":303},{"type":27,"tag":44,"props":3024,"children":3025},{},[3026],{"type":32,"value":308},{"type":27,"tag":28,"props":3028,"children":3029},{},[3030],{"type":32,"value":313},{"type":27,"tag":65,"props":3032,"children":3033},{"id":316},[3034],{"type":32,"value":319},{"type":27,"tag":28,"props":3036,"children":3037},{},[3038],{"type":32,"value":324},{"type":27,"tag":40,"props":3040,"children":3041},{},[3042,3046,3050,3054],{"type":27,"tag":44,"props":3043,"children":3044},{},[3045],{"type":32,"value":332},{"type":27,"tag":44,"props":3047,"children":3048},{},[3049],{"type":32,"value":337},{"type":27,"tag":44,"props":3051,"children":3052},{},[3053],{"type":32,"value":342},{"type":27,"tag":44,"props":3055,"children":3056},{},[3057],{"type":32,"value":347},{"type":27,"tag":28,"props":3059,"children":3060},{},[3061],{"type":32,"value":352},{"type":27,"tag":65,"props":3063,"children":3064},{"id":355},[3065],{"type":32,"value":355},{"type":27,"tag":28,"props":3067,"children":3068},{},[3069],{"type":32,"value":362},{"type":27,"tag":364,"props":3071,"children":3072},{},[3073,3077,3081,3085],{"type":27,"tag":44,"props":3074,"children":3075},{},[3076],{"type":32,"value":371},{"type":27,"tag":44,"props":3078,"children":3079},{},[3080],{"type":32,"value":376},{"type":27,"tag":44,"props":3082,"children":3083},{},[3084],{"type":32,"value":381},{"type":27,"tag":44,"props":3086,"children":3087},{},[3088],{"type":32,"value":386},{"type":27,"tag":28,"props":3090,"children":3091},{},[3092],{"type":32,"value":391},{"type":27,"tag":65,"props":3094,"children":3095},{"id":394},[3096],{"type":32,"value":394},{"type":27,"tag":40,"props":3098,"children":3099},{},[3100,3104,3108,3112,3116],{"type":27,"tag":44,"props":3101,"children":3102},{},[3103],{"type":32,"value":404},{"type":27,"tag":44,"props":3105,"children":3106},{},[3107],{"type":32,"value":409},{"type":27,"tag":44,"props":3109,"children":3110},{},[3111],{"type":32,"value":414},{"type":27,"tag":44,"props":3113,"children":3114},{},[3115],{"type":32,"value":419},{"type":27,"tag":44,"props":3117,"children":3118},{},[3119],{"type":32,"value":424},{"type":27,"tag":65,"props":3121,"children":3122},{"id":427},[3123],{"type":32,"value":427},{"type":27,"tag":28,"props":3125,"children":3126},{},[3127],{"type":32,"value":434},{"type":27,"tag":28,"props":3129,"children":3130},{},[3131],{"type":32,"value":439},{"type":27,"tag":40,"props":3133,"children":3134},{},[3135,3142,3149],{"type":27,"tag":44,"props":3136,"children":3137},{},[3138],{"type":27,"tag":447,"props":3139,"children":3140},{"href":449},[3141],{"type":32,"value":452},{"type":27,"tag":44,"props":3143,"children":3144},{},[3145],{"type":27,"tag":447,"props":3146,"children":3147},{"href":458},[3148],{"type":32,"value":461},{"type":27,"tag":44,"props":3150,"children":3151},{},[3152],{"type":27,"tag":447,"props":3153,"children":3154},{"href":467},[3155],{"type":32,"value":470},{"title":7,"searchDepth":472,"depth":472,"links":3157},[3158,3159,3160,3161,3162,3163,3164,3165,3166],{"id":67,"depth":475,"text":67},{"id":110,"depth":475,"text":110},{"id":143,"depth":475,"text":143},{"id":222,"depth":475,"text":222},{"id":278,"depth":475,"text":278},{"id":316,"depth":475,"text":319},{"id":355,"depth":475,"text":355},{"id":394,"depth":475,"text":394},{"id":427,"depth":475,"text":427},1777508581651]