Nuxt 框架静态站点生成（SSG)（六）

1. 配置 nuxt.config.js

首先，你需要在项目的 nuxt.config.js 文件中设置 target 为 ‘static’，这告诉 Nuxt 你打算生成一个静态网站。

// nuxt.config.js
export default {
  target: 'static', // 设置目标为静态网站
  // 其他配置...
}

2. 使用动态路由

静态站点生成通常与动态路由结合使用。在 pages/ 目录中，你可以创建动态路由来生成静态页面。

例如，假设你有一个博客，想要为每篇文章生成一个静态页面：

// pages/posts/_id.vue
<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    // 根据文章ID获取文章数据
    const post = await fetch(`https://api.example.com/posts/${params.id}`).then(res => res.json())
    return { post }
  }
}
</script>

3. 生成静态站点

配置完成后，你可以使用 nuxt generate 命令来生成静态站点：

nuxt generate

这个命令会触发静态站点的生成过程，Nuxt 会读取你的动态路由，并为每个可能的路由生成一个静态 HTML 文件。

4. 部署静态文件

生成的静态文件会放在 dist/ 目录下。你可以将这些文件部署到任何静态文件服务器上，如 GitHub Pages、Netlify、Vercel 等。

5. 示例：生成博客文章的静态页面

假设你有一个博客，每篇文章都有一个唯一的 ID。你可以创建一个动态路由来捕获这个 ID，并为每篇文章生成一个静态页面。

// nuxt.config.js
export default {
  target: 'static',
  generate: {
    // 可以在这里配置动态路由的遍历逻辑
  }
}

// pages/posts/_id.vue
<template>
  <article>
    <h1>{{ post.title }}</h1>
    <p>Published on: {{ post.date }}</p>
    <div v-html="post.content"></div>
  </article>
</template>

<script>
export default {
  key: 'post',
  async asyncData({ params }) {
    const response = await fetch(`https://api.example.com/posts/${params.id}`)
    const post = await response.json()
    return { post }
  }
}
</script>

pages/posts/_id.vue 是一个动态路由页面，它将根据 URL 中的 _id 参数来请求数据，并渲染文章内容。当你运行 nuxt generate 命令时，Nuxt 会调用 asyncData 方法来获取数据，并为每篇文章生成一个静态 HTML 文件。

注意事项

• 在静态站点模式下，Nuxt 不再支持服务器端渲染（SSR）。
• 静态站点生成适用于内容不经常变动的网站，如博客、文档等。
• 动态路由生成的静态页面数量可能会很多，确保你的数据源能够支持这种规模的请求。