Nuxt3静态页面生成时获取数据并替换fetch命令的实现方法

你要的是在nuxt generate阶段获取API数据，生成静态页面后直接用硬编码的数据代替fetch请求，以下是几种可行方案：

方法1：利用Nuxt3原生SSG Payload（最简便） #

Nuxt3的静态生成默认会将useFetch/useAsyncData获取的数据序列化到页面的payload中，客户端加载时直接复用该数据，不会发起新的API请求。只需调整你的代码并确保配置正确：

修正你原代码的模板语法错误（补全闭合}）：

<template>
  <main>
    {{ page?.content }}
  </main>
</template>

<script setup>
const { data: page } = await useFetch('http://api.example/pages/index', {
  headers: { 'api-key': api.key },
  // 确保数据在生成阶段被固化，客户端不再重复请求
  server: true,
  staleTime: Infinity
})
</script>

运行nuxt generate后，生成的静态文件会包含预渲染好的HTML内容，同时在_nuxt目录下生成对应payload文件，客户端自动读取该数据，无需再调用API。

方法2：预生成数据文件并导入 #

如果你希望生成后的代码中直接使用硬编码的数据对象，可以在生成前先拉取数据并保存为本地文件：

1. 创建数据获取脚本scripts/fetch-page-data.js：

import fs from 'fs/promises'
import fetch from 'node-fetch'

async function main() {
  const res = await fetch('http://api.example/pages/index', {
    headers: { 'api-key': '你的API密钥' }
  })
  const pageData = await res.json()
  await fs.writeFile('./assets/data/page-data.ts', `export const pageData = ${JSON.stringify(pageData)}`)
}

main().catch(err => console.error(err))

2. 在package.json中添加预生成钩子：

{
  "scripts": {
    "pregenerate": "node scripts/fetch-page-data.js",
    "generate": "nuxt generate"
  }
}

3. 修改页面组件，根据环境切换数据源：

<template>
  <main>
    {{ page.content }}
  </main>
</template>

<script setup>
let page
// 开发环境用API请求，生产/生成环境用预生成的静态数据
if (process.dev) {
  const { data } = await useFetch('http://api.example/pages/index', {
    headers: { 'api-key': api.key }
  })
  page = data.value
} else {
  import { pageData } from '~/assets/data/page-data'
  page = pageData
}
</script>

运行npm run generate时，会先拉取数据并保存，Nuxt构建时直接使用本地数据，生成后的代码不再包含API请求逻辑。

方法3：构建时替换代码（彻底移除fetch） #

如果需要完全移除代码中的fetch语句，直接替换为硬编码数据，可以用Vite插件在构建阶段完成替换：

1. 安装unplugin-replace：

npm install unplugin-replace -D

2. 修改nuxt.config.ts配置插件：

import replace from 'unplugin-replace/vite'

export default defineNuxtConfig({
  vite: {
    plugins: [
      replace({
        values: {
          // 匹配你原有的useFetch代码，替换为静态数据
          "const { data: page } = await useFetch(`http://api.example/pages/index`, { headers: { 'api-key': api.key }});": async () => {
            const res = await fetch('http://api.example/pages/index', {
              headers: { 'api-key': '你的API密钥' }
            })
            const pageData = await res.json()
            return `const page = ${JSON.stringify(pageData)};`
          }
        },
        // 仅在生产构建时生效
        apply: 'build',
        enforce: 'post'
      })
    ]
  }
})

保持你原有的页面代码，运行nuxt generate后，构建工具会自动将fetch语句替换为硬编码的page对象，生成后的代码中完全没有API请求逻辑。

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