在 Nuxt 3 生成期間獲取數據

Question

如何在Nuxt3中生成static頁面時只獲取數據。 生成后，數據應該存儲在源代碼中，即fetch命令應該替換為fetched object。在Nuxt3中怎么可能？

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

<script setup>

const { data: page } = await useFetch(`http://api.example/pages/index`, { headers: { 'api-key': api.key }});

</script>

Answer 1

您可以只運行npm run generate ，這將調用 API 並在構建期間使用所有數據構建頁面。

在.output/public/index.html中，您現在可以看到其中的所有內容。 您現在可以在任何托管站點上托管此文件夾。

或者，您可以運行npm run preview這將使用 index.html 文件啟動服務器，您可以右鍵單擊並檢查頁面源。

通過將其添加到nuxt.config.ts也可以進行手動預渲染

預渲染文檔

  nitro: {
     prerender: {
        routes: ['/user/1', '/user/2']
     }
  }

請查看 Nuxt 網站上的文檔