通过 100 多个技巧学习 Nuxt!

预渲染

Nuxt 允许在构建时静态渲染页面,以提高特定性能或 SEO 指标

Nuxt 允许在构建时渲染应用程序中选定的页面。当请求预构建的页面时,Nuxt 将提供这些页面,而不是动态生成它们。

Nuxt 渲染模式 中阅读更多信息。

基于爬虫的预渲染

使用 nuxi generate 命令,使用 Nitro 爬虫构建和预渲染您的应用程序。此命令类似于 nuxt build,并将 nitro.static 选项设置为 true,或者运行 nuxt build --prerender

这将构建您的站点,启动一个 Nuxt 实例,并且默认情况下,预渲染根页面 / 以及站点链接到的任何页面,以及这些页面链接到的任何页面,依此类推。

npx nuxi 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,直到没有更多锚标记可以爬取。

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

阅读有关 nuxi generate 命令的更多信息。

选择性预渲染

您可以手动指定 Nitro 将在构建期间获取和预渲染的路由,或者忽略您不想预渲染的路由,例如 nuxt.config 文件中的 /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
: {
// Set prerender to true to configure it to be prerendered "/rss.xml": {
prerender
: true },
// Set it to false to configure it to be skipped for prerendering "/this-DOES-NOT-get-prerendered": {
prerender
: false },
// Everything under /blog gets prerendered as long as it // is linked to from another page "/blog/**": {
prerender
: true },
}, });
阅读有关 Nitro 的 routeRules 配置的更多信息。

作为简写,您还可以在页面文件中使用 defineRouteRules 配置此项。

此功能是实验性的,为了使用它,您必须在 nuxt.config 中启用 experimental.inlineRouteRules 选项。
pages/index.vue
<script setup>
// Or set at the page level
defineRouteRules({
  prerender: true,
});
</script>

<template>
  <div>
    <h1>Homepage</h1>
    <p>Pre-rendered at build time</p>
  </div>
</template>

这将转换为

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

运行时预渲染配置

prerenderRoutes

您可以在 Nuxt 上下文 中的运行时使用它,为 Nitro 添加更多要预渲染的路由。

pages/index.vue
<script setup>
prerenderRoutes(["/some/other/url"]);
</script>

<template>
  <div>
    <h1>This will register other routes for prerendering when prerendered</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;
        }
      },
    },
  },
});