Nuxt 2 静态改进
nuxt export，用于预渲染页面，而无需触发 webpack 构建，目的是分离渲染和构建过程。唯一的问题是，大多数 Nuxt 用户无法充分发挥这种分离的潜力... 直到现在。
简介
在 Nuxt 2.13 版本中，引入了 完全静态模式。此外，还添加了一个新的命令 nuxt export，用于预渲染页面，而无需触发 webpack 构建，目的是分离渲染和构建过程。唯一的问题是，大多数 Nuxt 用户无法充分发挥这种分离的潜力... 直到现在。
更快的静态部署
在 v2.14 版本中，当没有代码更改时，nuxt generate 将自动跳过 webpack 构建步骤，并使用之前的缓存构建。这将通过避免不必要的构建来帮助大幅缩短静态部署时间，构建通常是生成过程中最耗时的部分。缓存支持是平台无关的，可以在 Netlify、Vercel 或任何其他缓存 node_modules 的 CI/CD 设置上工作。
生成时间：缓存 vs 完整 webpack 构建
查看两次 nuxt generate 命令之间秒级的比较
Build是指需要 webpack 构建的情况Cache仅指内容已更改的情况（跳过 webpack 构建）
项目链接：Basic, Strapi 模块文档, Content 模块文档 和 Nuxt 2 文档。
在你的项目中使用
- 将
nuxt更新到最新的次要版本，即 v2.14。
npm update
- 确保你的
nuxt.config中target设置为static
export default {
target: 'static'
// ...
}
如果你保持 target: ‘server’ 或不指定 target，nuxt generate 的行为将与之前相同，以避免破坏性更改并提供旧版兼容性。
- 就是这样 🙌
现在，nuxt generate 命令仅在必要时构建项目，即当项目中的文件已更改时。它将始终重新渲染你的路由到静态 HTML 文件，就像 nuxt export 已经做的那样。
现在你只需将构建命令从 nuxt build && nuxt export 改回你在使用的平台上的 nuxt generate。如果你正在使用 CI，请确保你正确缓存了 node_modules。
从缓存中排除文件
默认情况下，nuxt 会忽略这些目录，因此如果其中发生任何更改，将不会触发构建
- 构建目录 (
.nuxt/) - 静态目录 (
static/) - 生成 dist (
dist/) node_modulesREADME.md- 隐藏的 dotfiles (例如
.npmrc)
你可以使用 nuxt.config 中的 generate.cache.ignore 选项添加更多模式
export default {
generate: {
cache: {
ignore: [
// When something changed in the docs folder, do not re-build via webpack
'docs'
]
}
}
}
也可以为 ignore 选项使用函数来覆盖默认的忽略条目。
模块作者
如果你正在开发一个 nuxt 模块，该模块处理不应触发重建的文件怎么办？最好的例子是 @nuxt/content 模块，它从仓库中读取 markdown 文件。在这种情况下，这些文件在运行时模块中使用，当使用 @nuxt/content 时就是这种情况，模块本身可以告诉 nuxt 为你忽略这些文件，因此你无需执行任何操作！模块作者可以使用新的 generate:cache:ignore 钩子来做到这一点
nuxt.hook('generate:cache:ignore', ignore => ignore.push('content'))
工作原理
当使用新的 nuxt generate 和 static target 时，将写入一个快照，其中包括非忽略项目文件的校验和以及 nuxt 版本和一些其他配置 .nuxt/build.json。此外，我们还将构建目录移动到 node_modules/.cache/nuxt。由于 node_modules 被所有主要平台（Netlify、Vercel...）和常见的 CI/CD 脚本缓存，因此此解决方案开箱即用，无需额外配置。
当随后调用 nuxt generate 时，它将再次基于你的项目文件创建校验和，然后将其与 node_modules/.cache/nuxt/build.json 中的现有校验和进行比较。
如果它们匹配，则意味着没有任何需要重建的更改，因此我们可以直接开始渲染页面。
如果检测到不匹配，则意味着需要完全重建。你还可以通过检查控制台日志来查看是什么文件导致了重建。构建之后，nuxt generate 将把新的校验和保存在 .nuxt/build.json 中。你可以 在这里 查看完整的实现。
回到旧的命令
在 Nuxt v2.13 中，我们专门为静态 target 引入了 nuxt export 和 nuxt serve。在 Nuxt v2.14 中，它们已被弃用，因为 nuxt generate 和 nuxt start 足够智能地检测 target 并在必要时构建。
Server target
nuxt dev= 开发服务器nuxt build= 为生产环境构建你的应用程序nuxt start= 启动生产服务器（用于 Node.js 托管，如 Heroku、DigitalOcean 等）
Static target
nuxt dev= 开发服务器nuxt generate= 如果需要构建，则构建并静态导出到dist/nuxt start= 像你的静态托管服务（Netlify、Vercel、Surge 等）一样服务dist/目录，非常适合在部署前进行测试
下一步做什么
- 将你的项目升级到 nuxt@2.14.0
- 使用
nuxt generate代替nuxt export - 使用
nuxt start代替nuxt serve - 享受快速部署 🤙