前军教程网

要将动态生成的列表预渲染成 HTML，可以使用 Nuxt.js 中的静态生成（static generation）模式。这个模式会在构建时生成静态 HTML 页面，然后在运行时直接提供这些页面，而不需要每次请求时生成。

下面是一个基本的示例，演示如何使用 Nuxt.js 的静态生成模式将动态列表预渲染成 HTML。

首先，在 Nuxt.js 项目中创建一个页面，该页面将显示动态列表。假设这个页面叫做 list.vue。在 list.vue 中，你可以使用 asyncData 方法来动态生成列表数据。例如：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('https://api.example.com/items')
    const items = response.data
    return { items }
  }
}
</script>

接下来，在 nuxt.config.js 文件中配置静态生成模式。在 generate 配置中，添加一个函数来生成所有的动态路由。在这个函数中，你可以调用 API 来获取所有列表数据，并为每个列表项生成一个路由：

export default {
  generate: {
    async routes() {
      const response = await $axios.get('https://api.example.com/items')
      const items = response.data
      return items.map(item => ({
        route: `/items/${item.id}`,
        payload: item
      }))
    }
  }
}

在上面的示例中，我们通过调用 https://api.example.com/items 来获取所有列表数据，并将每个列表项的 id 用作路由的一部分。然后，我们将每个路由和对应的数据负载返回。生成器将根据这些路由和数据负载来生成静态 HTML 页面。

最后，你需要更新 list.vue 页面，使其接受一个参数来显示单个列表项的详细信息。例如：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <nuxt-link :to="`/items/${item.id}`">{{ item.title }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, params }) {
    const response = await $axios.get(`https://api.example.com/items/${params.id}`)
    const item = response.data
    return { item }
  }
}
</script>

现在，你可以运行 npm run generate 命令来生成静态 HTML 页面。这将在 dist 目录下生成一个包含所有静态 HTML 页面的目录。这些页面将包含动态生成的列表数据，以及每个列表项的详细信息。