v4 (4.0.0)
Nuxt on GitHub

预渲染

Nuxt 允许页面在构建时进行静态渲染，以改善某些性能或 SEO 指标

Nuxt 允许从你的应用中选择特定页面在构建时进行渲染。当有请求时，Nuxt 会提供预构建的页面，而不是动态生成它们。

阅读更多 Nuxt 渲染模式.

基于爬取的预渲染

使用 nuxt generate 命令，通过 Nitro 爬虫来构建和预渲染你的应用。这个命令类似于设置 nitro.static 选项为 true 时运行 nuxt build，或者运行 nuxt build --prerender。

这会构建你的站点，启动一个 nuxt 实例，默认情况下，会预渲染根页面 / 以及你的站点中它所链接到的任何页面、这些页面所链接到的任何站点页面，以此类推。

npx nuxt generate

现在你可以将 .output/public 目录部署到任何静态托管服务，或者使用 npx serve .output/public 在本地预览。

Nitro 爬虫的工作原理：

  1. 加载应用根路由（/）、~/pages 目录中的任何非动态页面以及 nitro.prerender.routes 数组中的任何其他路由的 HTML。
  2. 将 HTML 和 payload.json 保存到 ~/.output/public/ 目录，以便静态提供。
  3. 在 HTML 中找到所有锚标签（<a href="...">），以导航到其他路由。
  4. 对找到的每个锚标签重复步骤 1-3，直到没有更多的锚标签可爬取。

理解这一点很重要，因为未链接到可发现页面的页面无法自动预渲染。

阅读更多关于 nuxt generate 命令的内容。

选择性预渲染

你可以在 nuxt.config 文件中手动指定 Nitro 将在构建期间获取和预渲染的路由，或者忽略你不希望预渲染的路由（如 /dynamic）：

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ["/user/1", "/user/2"],
      ignore: ["/dynamic"],
    },
  },
});

你可以将此与 crawlLinks 选项结合使用，以预渲染爬虫无法发现的一组路由，如你的 /sitemap.xml 或 /robots.txt：

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ["/sitemap.xml", "/robots.txt"],
    },
  },
});

将 nitro.prerender 设置为 true 类似于将 nitro.prerender.crawlLinks 设置为 true。

在 Nitro 文档中阅读更多关于预渲染的内容。

最后，你可以使用 routeRules 手动配置。

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 设置 prerender 为 true，配置其被预渲染
    "/rss.xml": { prerender: true },
    // 设置为 false，配置其跳过预渲染
    "/this-DOES-NOT-get-prerendered": { prerender: false },
    // /blog 下的所有内容都会被预渲染，只要它
    // 从另一个页面链接过来
    "/blog/**": { prerender: true },
  },
});
阅读更多关于 Nitro 的 routeRules 配置。

作为简写，你也可以在页面文件中使用 defineRouteRules 进行配置。

此功能是实验性的，要使用它，你必须在 nuxt.config 中启用 experimental.inlineRouteRules 选项。
pages/index.vue
<script setup>
// 或者在页面级别设置
defineRouteRules({
  prerender: true,
});
</script>

<template>
  <div>
    <h1>首页</h1>
    <p>在构建时预渲染</p>
  </div>
</template>

这将被转换为：

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    "/": { prerender: true },
  },
});

运行时预渲染配置

prerenderRoutes

你可以在 Nuxt 上下文 中的运行时使用此函数，以添加更多供 Nitro 预渲染的路由。

pages/index.vue
<script setup>
prerenderRoutes(["/some/other/url"]);
prerenderRoutes("/api/content/article/my-article");
</script>

<template>
  <div>
    <h1>这将在预渲染时注册其他要预渲染的路由</h1>
  </div>
</template>
阅读更多 prerenderRoutes.

prerender:routes Nuxt 钩子

在预渲染之前调用此钩子，用于注册额外的路由。

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async "prerender:routes"(ctx) {
      const { pages } = await fetch("https://api.some-cms.com/pages").then(
        (res) => res.json(),
      );
      for (const page of pages) {
        ctx.routes.add(`/${page.name}`);
      }
    },
  },
});

prerender:generate Nitro 钩子

预渲染期间为每个路由调用此钩子。你可以使用它对每个要预渲染的路由进行精细处理。

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    hooks: {
      "prerender:generate"(route) {
        if (route.route?.includes("private")) {
          route.skip = true;
        }
      },
    },
  },
});