2020年6月19日，NuxtJS 发布 v2.13.0
2020年7月28日，NuxtJS 发布 v2.14.0

要开发 SEO 的静态网站，又想享受框架开发的舒适，于是选择 Nuxt，可用来生成静态站总还是有些蹩脚，比如默认不支持动态路由等。

这两个次版本的发布，终于让 Nuxt 开发静态网站方便多了！

先说亮眼新特性：

• v2.13 增加了 target: 'static' 配置，搭配指令 nuxt export 来生成完全静态的网站。
• v2.14 用 nuxt generate 指令取代了 nuxt export，后者昙花一现退出 nuxt 舞台。
• 可以处理动态路由了，无需另外 generate.routes 指定了。
• 更智能的 nuxt generate，webpack 会跳过没有变化的文件，大大缩减了生成的时间。
• 更智能的 nuxt start，generate 之后，可以使用 nuxt start 在本地运行生成的静态应用，用来进行部署前的测试，并且支持 SPA Fallback。

可以处理动态路由 和 nuxt start 真是太棒了。

target: 'static' + nuxt generate 生成的【完全静态】的应用又是什么意思呢？与之前 generate 生成的静态应用有什么区别？

我们先来看一下 Nuxt 官网的一张图，阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通 <nuxt-link> 切换路由渲染页面）的流程

nuxt 服务器请求到渲染的过程

可以看到，在 SSR 中，服务端会执行 asyncData() 和 fetch()，用来访问接口生成数据，从而在服务端就渲染出页面内容。

那么，在 generate 生成的静态应用中会怎样呢？如我们预料，生成的 dist 中的 html，就是执行过 asyncData() 和 fetch() 的有数据内容的文件了。

但是，当我们切换路由的时候，这两个函数又被调用了一遍，如果其中有接口调用，就会再次请求接口，拿回来最新的数据。问题是，这让页面切换变慢，而许多静态网站并不需要请求最新的数据。

于是，【完全静态】的应用就被千呼万唤召唤出来了，它的接口请求的数据定格在 generate 的时候，部署后不会再通过 asyncData() 和 fetch() 调用 API 了。这使得页面切换变得非常快。

可是，对于某些页面，我还想要最新的数据，怎么办呢？别担心，新版的 nuxt 还很贴心地支持了 Preview mode:

// plugins/preview.client.js

export default async function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

添加这个插件，然后在需要更新数据的页面 url 后面加上 ?preview=1 就可以做到了。

---

参考

Going Full Static
NuxtJS 官方文档