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