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