全面静态化

太长了不想读

1. 升级 Nuxt 至 2.14.0
2. 在 nuxt.config.js 中设置 target: 'static'
3. 执行 nuxt generate
4. 完成 ✨

额外奖励：你可以通过运行 nuxt start 来启动一个本地服务器，为你生成的静态应用提供服务。

注意：在这个视频中，我们使用的是已经废弃的 nuxt export，推荐使用 nuxt generate。

历史

Nuxt 从 v0.3.2（2016 年 11 月）起就具备了静态生成的功能，之后我们在多个方面进行了改进，但始终没有实现完全的静态生成。今天，我很高兴地宣布，使用 Nuxt 2.13，现在可以实现完全的静态导出。

当前问题

nuxt generate 主要是预渲染，当你在客户端进行导航时，会调用 asyncData 和 fetch，向你的 API 发送请求。很多用户要求支持“完全静态”模式，意味着在导航时不调用这两个钩子，因为下一个页面已经预渲染完毕。

此外，开发者体验也不理想：

• 在 SSR 中可以访问 req 或 res，但在运行 nuxt generate 时不能访问
• process.static 仅在运行 nuxt generate 时为 true，使得开发 Nuxt 模块或插件进行静态生成变得缓慢
• 在 generate.routes 中必须指定所有的动态路由，这样做变得更困难，因为在该处无法访问到 Nuxt 模块。
• 在开发中无法测试 SPA 回退，回退是你的 Nuxt 应用的仅客户端版本，当访问 404 页面时加载
• nuxt generate 默认运行 nuxt build，如果只有内容发生变化，生成网站会变得更慢

需要注意的是，使用 nuxt-payload-extractor 模块可以实现完全的静态支持，但使用起来比较冗长，并且有一些限制。

新的配置选项：target

为了改善用户体验，同时通知 Nuxt 你希望将应用导出到静态托管，我们在你的 nuxt.config.js 中引入了一个 target 选项：

<script setup>
  import { ref, computed } from '#imports'

  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

当使用静态目标运行 nuxt dev 时，将改善开发者体验：

• 从上下文中删除 req 和 res
• 在 404、错误和重定向时回退到客户端渲染（参见 SPA 回退）
• $route.query 在服务器端渲染上始终等于 {}
• process.static 为 true

我们还公开了 process.target，以便模块作者根据用户的目标添加逻辑。

更智能的 nuxt generate

现在，使用 v2.14.0，你可以使用 nuxt generate，它会智能地判断是否需要构建。

非常快速的静态应用程序

带有 target: 'static' 的 nuxt generate 将将所有页面预渲染为 HTML，并保存 payload 文件以便在客户端导航时模拟 asyncData 和 fetch，这意味着在客户端导航时不会再发起对你的 API 的 HTTP 请求。通过将页面的负载提取到一个 JavaScript 文件中，还可以减小所提供的 HTML 大小，并且可以通过预加载（ 标签中的内容）实现最佳性能。

当进行全面静态化时，我们还改进了智能预取功能，它还将获取载荷，使得导航即时生效 👀

集成爬虫

此外，它还内置了一个爬虫，检测每个相对链接并生成它们：

如果你想要排除一批路由，使用 generate.exclude。你仍然可以使用 generate.routes 来添加爬虫无法检测到的额外路由。

要禁用爬虫，在你的 nuxt.config.js 中设置 generate.crawler: false。

更快速的重新部署

通过将 nuxt build 和 nuxt export 分离，我们能够进行一系列的提升：只有你的内容发生变化时才进行预渲染，这意味着：没有 webpack 构建 → 更快的重新部署。

更智能的 nuxt start

在将 Nuxt 应用程序静态生成到 dist/ 后，使用 nuxt start 启动一个生产级 HTTP 服务器，并为你的静态应用提供服务，支持 SPA 回退。

这个命令非常适合在推送到你喜爱的静态托管提供商之前本地测试你的静态应用程序。

预览模式

我们自带了实时预览支持，以便持续调用你的 API：

export default async function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

它将自动刷新页面数据（调用 nuxtServerInit、asyncData 和 fetch）。

当激活预览模式时，将调用 asyncData 和 fetch 的原始方法。

命令

根据 target 的不同，你可以运行以下命令。

• server
  • nuxt dev：启动开发服务器
  • nuxt build：将你的 Nuxt 应用程序打包为生产版本
  • nuxt start：启动生产服务器
• static
  • nuxt dev：启动开发服务器（兼容静态）
  • nuxt generate：根据需要（兼容静态）将你的 Nuxt 应用程序打包为生产版本，并将你的应用程序导出为静态 HTML，存储在 dist/ 目录中
  • nuxt start：从 dist/ 目录中提供你的生产应用程序

接下来做什么