介绍
随着 Nuxt 2.13 版本的发布，引入了全静态模式。此外，还添加了一个新命令nuxt export，用于在不触发 webpack 构建的情况下预渲染页面，旨在分离渲染和构建过程。唯一的问题是，大多数 Nuxt 用户未能充分发挥这种分离的潜力……直到现在。
更快的静态部署
在 v2.14 中，nuxt generate将在代码未更改时自动跳过 webpack 构建步骤，并使用之前的构建缓存。这将通过避免不必要的构建来大幅缩短静态部署时间，因为构建通常是生成过程中最耗时的部分。缓存支持平台无关，适用于 Netlify、Vercel 或任何其他缓存node_modules的 CI/CD 设置。
生成时间：缓存与完整 webpack 构建
查看两次nuxt generate之间的秒数比较
Build表示需要 webpack 构建Cache仅当内容更改时（跳过 webpack 构建）
项目链接基本, Strapi 模块文档, 内容模块文档等等Nuxt 2 文档.
在您的项目中使用
- 将
nuxt更新到最新的次要版本，即 v2.14。
npm update
yarn upgrade nuxt
- 确保您的
nuxt.config.js中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- 隐藏点文件 (例如
.npmrc)
您可以使用以下方式添加更多模式generate.cache.ignore在nuxt.config中的选项
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目标时，一个包含非忽略项目文件的校验和以及 Nuxt 版本和其他一些配置的快照将被写入.nuxt/build.json。此外，我们还将构建目录移动到node_modules/.cache/nuxt。由于所有主要平台（Netlify、Vercel 等）和常见的 CI/CD 脚本都缓存node_modules，因此此解决方案无需额外配置即可开箱即用。
当随后调用nuxt generate时，它将再次根据您的项目文件创建校验和，然后将其与node_modules/.cache/nuxt/build.json中现有的校验和进行比较。
如果它们匹配，则表示没有需要重新构建的更改，因此我们可以直接开始渲染页面。
如果检测到不匹配，则意味着需要进行完整的重新构建。您还可以通过检查控制台日志来查看是哪个文件导致了重新构建。构建完成后，nuxt generate 将把新的校验和保存到.nuxt/build.json中。您可以查看完整的实现此处.
回到老式命令
在 Nuxt v2.13 中，我们引入了专门为静态目标设计的nuxt export和nuxt serve。在 Nuxt v2.14 中，它们已被弃用，因为nuxt generate和nuxt start足够智能，可以检测目标并在必要时进行构建。
服务器目标
nuxt dev= 开发服务器nuxt build= 为生产环境构建您的应用程序nuxt start= 启动生产服务器（用于 Node.js 托管，如 Heroku、DigitalOcean 等）
静态目标
nuxt dev= 开发服务器nuxt generate= 必要时构建并静态导出到dist/nuxt start= 提供dist/目录，就像您的静态托管（Netlify、Vercel、Surge 等）会做的那样，非常适合在部署前进行测试
下一步该做什么
- 将您的项目升级到[email protected]
- 使用
nuxt generate代替nuxt export - 使用
nuxt start代替nuxt serve - 享受快速部署 🤙