vue.js - nuxt 3 useFetch() 返回错误 fetch failed()

Question

我已经从 nuxt 3 官方文档中设置了 nuxt 3，并使用唯一的 useFetch() 可组合项来获取 app.vue 文件中的数据，但它返回错误 Error: fetch failed()当我们重新加载页面时。

请检查我的 app.vue 文件的以下代码

<template>
{{data}}
</template>

<script setup>
  const { data, pending, error, refresh } = useFetch('https://api.nuxtjs.dev/mountains',
  {
    method: "get",
  });

  console.log(data.value);
  if (error.value) {
    console.log(error.value);
  }
</script>

我尝试过 useFetch 和 useLazyFetch 可组合项来获取数据，但当我们重新加载页面时，两者都会返回相同的错误。我认为客户端或服务器端存在一些问题，但对此不太了解。当我们再次访问该页面时，useFetch() 也会正确返回结果，但在初始 api 调用或我们硬重新加载页面时会发生错误。

Answer 1

我明白了。问题是我们需要在 nuxt.config.js 中添加 ssr: false 。如果我们需要使用服务器端渲染，也许 SSR 默认为 true，但如果我们想要单文件应用程序，我们需要保留 ssr: false。以上错误已修复。

nuxt.config.js

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    ssr: false,
})