Nuxt3配置从rest api获取数据并根据获取的数据生成静态页面

Question

我正在尝试使用 nuxt 3 生成静态页面，但没有成功。我从 WordPress Rest api (https://172.27.0.4/wp-json/...) 获取数据，nuxt 在 http://0.0.0.0:3000 上工作，所以我将其添加到 nuxt。 config.ts 解决 CORS:

  nitro: {
    devProxy: {
      '/wp-json': {
        target: process.env.API_URL + '/wp-json',
        changeOrigin: true,
        secure: false,
      },
    },
  },

有了这个，我可以在这个地址上看到来自

172.27.0.4/wp-json/...

的数据：

http://0.0.0.0:3000/wp-json/...

。

这是我的/pages/index.vue：

<template>
  <div class="work-tiles">
    <div v-for="post in posts" :key="post.id">
      {{post.title}}
    </div>
  </div>
</template>

<script setup>
import { useAsyncData } from 'nuxt/app'
const { data: posts } = useAsyncData('posts', () => $fetch('http://0.0.0.0:3000/wp-json/sar/v2/work/posts'));
console.log(posts.value)
</script>

使用

console.log(posts)

我可以在浏览器控制台中看到数据，但我在终端中看到

null

。我以为我也会在终端中看到一个数组...如果你知道为什么，请告诉我。

顺便说一句，我不知道如何修改 nuxt.config 以从

http://0.0.0.0:3000

中删除

$fetch('http://0.0.0.0:3000/wp-json/sar/v2/work/posts'))

，使其看起来像：

$fetch('/wp-json/sar/v2/work/posts'))

并仍然从 WordPress 获取数据。也许这就是我问题的原因......

我的完整 nuxt.config.ts：

export default defineNuxtConfig({
  devtools: {enabled: true},
  nitro: {
    devProxy: {
      '/wp-json': {
        target: process.env.API_URL + '/wp-json',
        changeOrigin: true,
        secure: false,
      },
    },
  },
  target: 'static',
  generate: {
    routes: ['/'],
  },
  compatibilityDate: '2024-11-16',
});

这是我用来生成静态页面的命令：

npx nuxi generate

它创建了

.output

目录，我在其中打开index.html，希望能找到html中的帖子标题或在那里获取的数据，但有空的div和错误（无法获取）：

但是使用

npm run dev

我可以在chrome中按

(CTRL + U)

从源代码中看到数据和html。

我哪里错了？

更新：

要在

console.log(posts.value)

上的终端中查看获取的数据，我必须将

await

添加到 useAsyncData:

const { data: posts } = await useAsyncData('posts', () => $fetch('http://0.0.0.0:3000/wp-json/sar/v2/work/posts'));

更新2：

有东西站在我这边。我尝试了一个假 api

const { data: posts } = await useAsyncData('posts', () => $fetch('https://jsonplaceholder.typicode.com/todos/'));

，页面成功生成，没有任何特定的 nuxt.config.ts:

export default defineNuxtConfig({
  compatibilityDate: '2024-11-16',
  nitro: {
    prerender: {
      routes: ['/'], //doesn't play a big role
    },
  },
});

Answer 1

原因确实在我这边，与 docker 网络有关。我将 docker-compose.yml 用于 WordPress（db、nginx、php），并为每个服务添加了显式 ipv4 地址。 Nuxt 也作为容器运行，并且与其他服务位于同一网络中。我删除了显式的 IP 地址并获取了如下数据：

1. 使用此变体，您不需要使用与 nginx 容器相同的网络：

   const { data: posts } =等待 useAsyncData('posts', () => $fetch('http://192.168.88.180:8080/wp-json/sar/v2/work/posts'));

或

2. 使用此变体，您需要使用与 wordpress 相同的网络

   const { data: posts } =等待 useAsyncData('posts', () => $fetch('http://swp_nginx/wp-json/sar/v2/work/posts'));

其中

swp_nginx

是容器名称。

但我还是不知道如何修改nuxt.config来获取没有域的数据：

...$fetch('/wp-json/sar/v2/work/posts')...

。

之前我使用纯 vue 3 和 vite.config，数据获取在没有域的情况下运行良好：

server: {
  host: '0.0.0.0',
  port: 3000,
  proxy: {
    '/wp-json': {
      target: process.env.API_URL, // http://<container-name>
      changeOrigin: true,
      secure: false,
    },
  },
},