Nuxt静态生成动态路由页面出现脚本错误，求排查方案

核心原因 #

静态生成的页面在服务端已渲染出content.title内容，但客户端Vue进行水合（hydration）时，content变量未被正确初始化，导致浏览器端抛出未定义错误。

排查&解决步骤 #

1. 给asyncData补充兜底逻辑
   当前asyncData仅在payload存在时返回content，但客户端场景（如刷新页面、客户端路由跳转）可能出现payload缺失的情况，必须补充兜底处理：

async asyncData({ payload, params }) {
  if (payload) {
    return { content: payload };
  }
  // 客户端无payload时，重新请求对应ID的内容
  const res = await axios.get(`https://path/to/endpint/${params.id}`, {
    headers: { "XXXX-API-KEY": process.env.API_KEY }
  });
  return { content: res.data };
}

2. 模板中添加变量安全访问
   直接访问content.title会在content为undefined时报错，用可选链或短路运算符规避：

<!-- 方式1：ES2020+可选链语法 -->
<p>{{ content?.title }}</p>
<!-- 方式2：短路运算符兼容旧环境 -->
<p>{{ content && content.title }}</p>

3. 验证静态生成的HTML内容
   执行nuxt generate后，查看.nuxt/dist目录下对应动态路由的HTML文件：

• 若HTML里无content.title内容：说明generate.routes获取的payload数据异常，可在routes函数中添加console.log(content)排查API返回的数据结构，确认title字段是否存在。
• 若HTML里有内容但客户端报错：说明客户端水合时content未被正确注入，检查nuxt.config.js中target: 'static'和ssr: true是否同时配置正确。

4. 检查客户端路由跳转逻辑
   如果是通过<nuxt-link>跳转到动态路由，确保传递的id参数正确，同时通过上述asyncData兜底逻辑，保证客户端跳转时能正确获取数据。

5. 确认Nuxt版本兼容性
   不同Nuxt版本的静态生成逻辑有差异：

• Nuxt2：确保nuxt generate后执行nuxt start时，系统读取的是已生成的静态文件，而非重新执行服务端渲染。
• Nuxt3：若使用Nuxt3，需确认nitro.prerender等静态生成相关配置是否正确。

内容的提问来源于stack exchange，提问作者高田悠