[{"data":1,"prerenderedAt":302},["ShallowReactive",2],{"docsNavigation":3,"blogNavigation":53,"/blog/nuxt-payload-extraction":95,"/blog/nuxt-payload-extraction-surround":297},[4,38],{"title":5,"path":6,"stem":7,"children":8,"icon":37},"常用网站","/docs/getting-started","1.docs/1.getting-started/1.index",[9,12,17,22,27,32],{"title":10,"path":6,"stem":7,"icon":11},"区块链相关(前端)","i-lucide-box",{"title":13,"path":14,"stem":15,"icon":16},"图片压缩","/docs/getting-started/photo-compression","1.docs/1.getting-started/2.photo-compression","i-lucide-image",{"title":18,"path":19,"stem":20,"icon":21},"组件库","/docs/getting-started/component-library","1.docs/1.getting-started/3.component-library","i-lucide-puzzle",{"title":23,"path":24,"stem":25,"icon":26},"图表库","/docs/getting-started/charts","1.docs/1.getting-started/4.charts","i-lucide-bar-chart-3",{"title":28,"path":29,"stem":30,"icon":31},"CSS","/docs/getting-started/css","1.docs/1.getting-started/5.css","i-lucide-palette",{"title":33,"path":34,"stem":35,"icon":36},"调试测试工具","/docs/getting-started/test","1.docs/1.getting-started/6.test","i-lucide-bug",false,{"title":39,"path":40,"stem":41,"children":42,"page":37},"常用工具","/docs/essentials","1.docs/2.essentials",[43,48],{"title":44,"path":45,"stem":46,"icon":47},"uni-helper","/docs/essentials/uni-helper","1.docs/2.essentials/1.uni-helper","i-lucide-settings",{"title":49,"path":50,"stem":51,"icon":52},"工作流可视化库","/docs/essentials/workflow-libraries","1.docs/2.essentials/2.workflow-libraries","i-lucide-workflow",[54],{"title":55,"path":56,"stem":57,"children":58,"page":37},"Blog","/blog","3.blog",[59,63,67,71,75,79,83,87,91],{"title":60,"path":61,"stem":62},"Vue 3 中 \u003CTransition> 报错：组件根节点无法被动画化的解决方案","/blog/asian-cuisine","3.blog/1.asian-cuisine",{"title":64,"path":65,"stem":66},"使用 openapi-ts-request 自动生成 API 请求代码","/blog/apifox-api-generation","3.blog/2.apifox-api-generation",{"title":68,"path":69,"stem":70},"解决 uni.upload 多文件上传限制：使用 fetch + FormData 实现 H5 环境下的多文件上传","/blog/file-upload-issue-solution","3.blog/3.file-upload-issue-solution",{"title":72,"path":73,"stem":74},"Wangeditor中被div包裹的img标签被过滤问题解决方案","/blog/wangeditor-img-filter-issue","3.blog/4.wangeditor-img-filter-issue",{"title":76,"path":77,"stem":78},"Nuxt项目部署后报错 “Cannot load payload /_payload.json” 的修复","/blog/nuxt-payload-extraction","3.blog/5.nuxt-payload-extraction",{"title":80,"path":81,"stem":82},"Nuxt项目导入nuxt-echarts实现图表渲染","/blog/nuxt-echarts-implementation","3.blog/6.nuxt-echarts-implementation",{"title":84,"path":85,"stem":86},"Reown+Wagmi 在 UniApp+Vite 项目中的问题与解决方案","/blog/reown-wagmi-uniapp-issues","3.blog/7.reown-wagmi-uniapp-issues",{"title":88,"path":89,"stem":90},"数字滚动动画组件 - Vue 动画最佳实践","/blog/number-scroll-animation","3.blog/8.number-scroll-animation",{"title":92,"path":93,"stem":94},"新电脑安装 nvm 卡住？无需修改配置文件，一行命令完美解决！","/blog/nvm-install-solution","3.blog/9.nvm-install-solution",{"id":96,"title":76,"authors":97,"badge":102,"body":104,"date":288,"description":289,"extension":290,"image":291,"meta":293,"navigation":294,"path":77,"seo":295,"stem":78,"__hash__":296},"posts/3.blog/5.nuxt-payload-extraction.md",[98],{"name":99,"avatar":100},"qibmz",{"src":101},"/image/avatar.avif",{"label":103},"work",{"type":105,"value":106,"toc":286},"minimark",[107,116,126,129,136,139,146,238,241,262,265,276,282],[108,109,110,111,115],"p",{},"在把 Nuxt 项目设置为非 SSR（例如 ",[112,113,114],"code",{},"ssr: false","）并部署到某些托管环境后，可能会在运行时看到报错：",[117,118,123],"pre",{"className":119,"code":121,"language":122},[120],"language-text","Cannot load payload /_payload.json\n","text",[112,124,121],{"__ignoreMap":125},"",[108,127,128],{},"原因",[108,130,131,132,135],{},"这是由 Nuxt 的 payload 提取（payload extraction）机制在一些部署 / 运行时场景下与静态资源访问不兼容导致的（例如当运行时无法正确提供或解析 ",[112,133,134],{},"/_payload.json","）。",[108,137,138],{},"解决方法",[108,140,141,142,145],{},"在 ",[112,143,144],{},"nuxt.config.ts"," 中关闭实验性的 payload 提取：",[117,147,151],{"className":148,"code":149,"language":150,"meta":125,"style":125},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  ssr: false,\n  experimental: {\n    // 关闭 payload 提取以避免运行时去加载 /_payload.json\n    payloadExtraction: false\n  }\n})\n","ts",[112,152,153,177,194,205,212,223,229],{"__ignoreMap":125},[154,155,158,162,165,169,173],"span",{"class":156,"line":157},"line",1,[154,159,161],{"class":160},"s7zQu","export",[154,163,164],{"class":160}," default",[154,166,168],{"class":167},"s2Zo4"," defineNuxtConfig",[154,170,172],{"class":171},"sTEyZ","(",[154,174,176],{"class":175},"sMK4o","{\n",[154,178,180,184,187,191],{"class":156,"line":179},2,[154,181,183],{"class":182},"swJcz","  ssr",[154,185,186],{"class":175},":",[154,188,190],{"class":189},"sfNiH"," false",[154,192,193],{"class":175},",\n",[154,195,197,200,202],{"class":156,"line":196},3,[154,198,199],{"class":182},"  experimental",[154,201,186],{"class":175},[154,203,204],{"class":175}," {\n",[154,206,208],{"class":156,"line":207},4,[154,209,211],{"class":210},"sHwdD","    // 关闭 payload 提取以避免运行时去加载 /_payload.json\n",[154,213,215,218,220],{"class":156,"line":214},5,[154,216,217],{"class":182},"    payloadExtraction",[154,219,186],{"class":175},[154,221,222],{"class":189}," false\n",[154,224,226],{"class":156,"line":225},6,[154,227,228],{"class":175},"  }\n",[154,230,232,235],{"class":156,"line":231},7,[154,233,234],{"class":175},"}",[154,236,237],{"class":171},")\n",[108,239,240],{},"说明",[242,243,244,259],"ul",{},[245,246,247,248,251,252,255,256,258],"li",{},"将 ",[112,249,250],{},"payloadExtraction"," 设置为 ",[112,253,254],{},"false"," 后，Nuxt 不会采用提取并生成 ",[112,257,134],{}," 的方式来加载页面数据，从而避免在某些部署环境中出现缺失或无法访问该资源导致的错误。",[245,260,261],{},"如果你的项目仍需 SSR 或静态预渲染场景，请谨慎评估该设置的影响。",[108,263,264],{},"参考",[242,266,267],{},[245,268,269,270],{},"GitHub 讨论与示例：",[271,272,273],"a",{"href":273,"rel":274},"https://github.com/nuxt/nuxt/issues/22068#issuecomment-1629076435",[275],"nofollow",[277,278,279],"blockquote",{},[108,280,281],{},"（注：文档内容由 Copilot 生成）",[283,284,285],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":125,"searchDepth":179,"depth":179,"links":287},[],"2026-01-13T00:00:00.000Z","将 Nuxt 设置为非 SSR（ssr: false）并部署后出现 `/_payload.json` 无法加载的解决方法。","md",{"src":292},"https://picsum.photos/id/912/640/360",{},true,{"title":76,"description":289},"HWolDRVQgH-NLY-2uP7OhS8t9k9hVe0oUYrVfaRDqaE",[298,300],{"title":72,"path":73,"stem":74,"description":299,"children":-1},"解决Wangeditor对div中img标签的过滤问题，特别是处理第三方接口导入商品详情时的兼容性问题",{"title":80,"path":81,"stem":82,"description":301,"children":-1},"详细介绍如何在Nuxt 4项目中集成nuxt-echarts模块并实现ECharts图表的完整步骤和注意事项。",1774239529517]