介紹
隨著 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 - 享受快速部署 🤙