实现全静态

阅读摘要

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 generate 进行静态生成的功能。此后我们进行了多项改进，但一直未能实现真正的全静态生成。今天我很高兴地宣布，随着 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>

使用 static target 运行 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，并保存一个负载文件，以便在客户端导航时模拟 asyncData 和 fetch，这意味着在客户端导航时不再需要向 API 发送 HTTP 请求。通过将页面负载提取到 JS 文件中，它还减小了 HTML 的体积并对其进行了预加载，从而获得最佳性能。在 header 中

我们在全静态模式下还改进了 智能预取，它也会预取负载，使页面跳转瞬间完成 👀

内置爬虫

此外，它内置了一个爬虫，会自动检测每一个相对链接并将其生成。

如果你想排除一些路由，请使用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，你可以运行以下命令：

• 服务器
  • nuxt dev: 启动开发服务器
  • nuxt build: 为生产环境打包你的 Nuxt 应用
  • nuxt start: 启动生产服务器
• static
  • nuxt dev: 启动开发服务器（具有静态感知）
  • nuxt generate: 如有需要，为生产环境打包你的 Nuxt 应用（具有静态感知），并将应用导出为 dist/ 目录中的静态 HTML
  • nuxt start: 从 dist/ 托管你的生产应用

下一步做什么