全静态化

内容太长，无法阅读

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 大小，并通过预加载（来自在头部）实现最佳性能。

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

集成爬虫

除此之外，它还内置了爬虫，检测所有相对链接并生成它们

如果你想排除一些路由，请使用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：启动生产服务器
• 静态
  • nuxt dev：启动开发服务器（静态感知）
  • nuxt generate：如果需要，为生产环境打包 Nuxt 应用程序（静态感知），并将应用程序导出为静态 HTML 到 dist/ 目录
  • nuxt start：从 dist/ 提供你的生产应用程序

下一步