完全静态化

太长不想看

1. 升级 nuxt 到 2.14.0
2. 在你的 nuxt.config.js 中设置 target: 'static'
3. 运行 nuxt generate
4. 搞定 ✨

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

注意：在这个视频中，我们使用的是 nuxt export，它已被弃用，取而代之的是 nuxt generate。

目录

• 太长不想看
• 目录
• 历史
• 当前问题
• 新的配置选项：target
• 更智能的 nuxt generate
  • 快如闪电的静态应用程序
  • 集成爬虫
  • 更快的重新部署
• 更智能的 nuxt start
• 预览模式
• 命令
  • 下一步做什么

历史

自 v0.3.2 (2016 年 11 月)以来，Nuxt 就有了 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，并保存一个有效负载文件，以便在客户端导航时模拟 asyncData 和 fetch，这意味着在客户端导航时不再需要 HTTP 调用您的 API。通过将页面有效负载提取到 js 文件，它还减少了提供服务的 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 应用程序（静态感知），并将您的应用程序导出到 dist/ 目录中的静态 HTML
  • nuxt start: 从 dist/ 提供您的生产应用程序

下一步做什么