完全静态化

内容过长不想阅读

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，它会智能地知道是否需要构建。

速度惊人的静态应用程序

nuxt generate 与 target: 'static' 将预渲染所有页面为 HTML，并保存一个 payload 文件，以便在客户端导航时模拟 asyncData 和 fetch，这意味着在客户端导航时不再需要 HTTP 调用你的 API。通过将页面 payload 提取到 js 文件，它还减小了所服务的 HTML 大小，并预加载它（从在 header 中）以获得最佳性能。

在进行完全静态化时，我们还改进了 智能预取，它也会获取 payload，使导航瞬间完成 👀

集成了爬虫

最重要的是，它还在内部集成了爬虫，检测每个相对链接并生成它

如果你想排除大量路由，请使用 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/ 提供你的生产应用程序

下一步做什么