Nuxtjs 生产环境下 fetch 钩子无法获取数据导致页面空白如何解决

第一步：排查API请求配置问题 #

本地开发正常、生产环境无数据90%以上是axios请求地址配置问题：

• Nuxt如果开启SSR/SSG模式，服务端执行fetch钩子时无法识别相对路径，必须配置完整的API服务域名
• 本地开发时axios默认会拼接本地开发服务地址，或者走本地代理规则，所以不会出错

在nuxt.config.js中添加axios全局配置：

export default {
  axios: {
    // 生产环境填你实际的API服务域名，开发环境填本地API地址
    baseURL: process.env.NODE_ENV === 'production' 
      ? 'https://你的生产API服务域名' 
      : 'http://localhost:本地API端口'
  }
}

第二步：补全异常捕获和状态判断 #

你当前的代码没有错误处理逻辑，fetch钩子执行失败不会抛出客户端可见报错，这也是控制台无报错的核心原因：

修改script逻辑 #

export default {
  data() {
    return {
      post: {},
      fetchError: false
    }
  },
  // 可根据需求配置是否需要服务端执行fetch，纯客户端渲染可以设为false
  fetchOnServer: true,
  async fetch() {
    try {
      let slug = this.$route.params.slug
      this.post = await this.$axios.$get(`/posts/${slug}`)
    } catch (err) {
      this.fetchError = true
      // 本地调试时可以打开打印，生产环境可以写入日志服务
      // console.error('请求失败：', err)
    }
  }
}

修改模板渲染逻辑 #

空对象调用post.title不会直接报错，但如果有后续依赖该值的逻辑可能导致渲染中断，补全状态判断避免空白：

<template>
  <div class="demo">
    <div v-if="$fetchState.pending">加载中...</div>
    <div v-else-if="fetchError || $fetchState.error">加载失败，请刷新重试</div>
    <h1 v-else>{{ post?.title || '无标题' }}</h1>
  </div>
</template>

第三步：按运行模式排查特殊问题 #

• 如果是SSG静态生成模式：检查generate配置是否覆盖了所有slug对应的路由，生成时是否可以正常访问API服务
• 如果是SSR服务端渲染模式：登录生产服务器查看Node服务运行日志，确认服务端发起API请求时是否存在网络不通、鉴权失败、API服务异常的问题
• 如果是纯客户端渲染模式：打开浏览器网络面板，刷新页面查看/posts/[slug]请求的地址、返回状态是否符合预期

内容的提问来源于stack exchange，提问作者Trường Nguyễn