在Nuxt 3生成过程中获取数据

Question

如何在Nuxt3中生成静态页面时才能获得数据。生成后，数据应存储在源代码中，即用获取的对象替换fetch命令。在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 网站的文档。