Nuxt3调用WordPress API生成静态页面失败问题求助

核心问题 #

你配置的devProxy仅在**开发模式（npm run dev）**生效，执行nuxi generate静态构建时，Nuxt处于服务器端预渲染阶段，不会启用devProxy。同时你在$fetch里硬编码了开发环境域名http://0.0.0.0:3000，构建阶段这个地址无法被正常访问，导致静态页面没有数据。

模拟API能正常生成是因为它是公网可访问地址，无需代理；而你的WordPress API是内网地址，构建阶段需要直接访问它。

解决方案步骤 #

1. 配置环境变量与API基础路径 #

确保API_URL（例如https://172.27.0.4）在构建阶段可被正确读取，同时通过runtimeConfig让Nuxt在开发和构建阶段自动切换API地址：
修改nuxt.config.ts：

export default defineNuxtConfig({
  devtools: {enabled: true},
  nitro: {
    devProxy: {
      '/wp-json': {
        target: process.env.API_URL + '/wp-json',
        changeOrigin: true,
        secure: false,
      },
    },
  },
  // 新增runtimeConfig，共享API地址
  runtimeConfig: {
    apiBase: process.env.API_URL, // 服务端可访问
    public: {
      apiBase: process.env.API_URL, // 客户端可访问（若需）
    }
  },
  target: 'static',
  generate: {
    routes: ['/'],
  },
  compatibilityDate: '2024-11-16',
});

2. 修正useAsyncData的请求路径 #

去掉硬编码域名，根据运行环境自动选择请求方式：

• 开发阶段：用相对路径/wp-json/...走devProxy
• 构建/生产阶段：直接访问WordPress API地址
  修改pages/index.vue的script部分：

<script setup>
import { useAsyncData } from 'nuxt/app'
const config = useRuntimeConfig()

// 自动切换API地址
const apiUrl = process.dev 
  ? '/wp-json/sar/v2/work/posts' 
  : `${config.apiBase}/wp-json/sar/v2/work/posts`

const { data: posts } = useAsyncData('posts', () => $fetch(apiUrl))
</script>

3. 确保构建环境可访问WordPress API #

由于你的WordPress API是内网地址，执行nuxi generate的机器必须能直接访问https://172.27.0.4（比如处于同一内网、通过VPN/内网穿透连接），否则构建阶段依然无法获取数据。

4. 关于终端console.log的说明 #

useAsyncData返回的是响应式对象，posts.value初始化时为null是因为异步请求未完成。添加await后终端能看到数据，但在script setup中无需手动await useAsyncData——Nuxt会自动处理异步数据加载，确保页面渲染时数据就绪。

验证步骤 #

1. 在.env文件中设置API_URL=https://172.27.0.4
2. 执行nuxi clean清理缓存
3. 执行nuxi generate重新构建
4. 打开.output/public/index.html，检查是否已渲染文章标题

内容的提问来源于stack exchange，提问作者forever_young