全面静态化

内容过长，概括如下

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
• 预览模式
• 命令
  • 下一步做什么

历史

Nuxt 从 v0.3.2（2016 年 11 月）开始就拥有使用 nuxt generate 进行静态生成的功能，从那时起，我们对其进行了多种改进，但从未实现完全静态生成。今天，我激动地宣布，Nuxt 2.13 现在可以实现完全静态导出。

当前问题

nuxt generate 主要用于预渲染，当你在客户端导航时，会调用 asyncData 和 fetch，向你的 API 发出请求。许多用户要求支持“完全静态”模式，这意味着在导航时不调用这两个钩子，因为下一页已经预渲染过了。

此外，开发者体验并不理想

• 在 SSR 中，你可以访问 req 或 res，但在运行 nuxt generate 时则无法访问
• 只有在运行 nuxt generate 时，process.static 才会为 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>

使用静态 target 运行 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 并保存一个有效载荷文件，以便在客户端导航时模拟 asyncData 和 fetch，这意味着客户端导航不再需要向你的 API 发出 HTTP 请求。通过将页面有效载荷提取到 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，你可以运行这些命令。

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

下一步做什么