完全静态化

太长不读

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>

使用静态目标运行 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 请求。 通过将页面 payload 提取到 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，您可以运行这些命令。

• server
  • nuxt dev：启动开发服务器
  • nuxt build：为生产环境打包 Nuxt 应用程序
  • nuxt start：启动生产服务器
• static
  • nuxt dev：启动开发服务器（静态感知）
  • nuxt generate：如果需要，为生产环境打包 Nuxt 应用程序（静态感知）并将您的应用程序导出到 dist/ 目录中的静态 HTML
  • nuxt start：从 dist/ 服务您的生产应用程序

接下来做什么