釋出·  

Nuxt 4.0 釋出公告

Nuxt 4.0 來了！這是一次以開發者體驗為核心的深思熟慮的演進，帶來了更好的專案組織、更智慧的資料獲取和改進的型別安全。
Daniel Roe

Daniel Roe

@danielroe.dev

Nuxt 4.0 來了！ 🎉

經過一年的真實世界測試，我們很高興地宣佈 Nuxt 4 正式釋出。這是一個以穩定性為主的重大版本，引入了一些經過深思熟慮的破壞性變更，以改善開發體驗。

如果您一直在關注，您會認識到其中的許多特性和變更——如果您是第一次接觸它們，我們希望您會喜歡它們。

🔥 有哪些新功能？

Nuxt 4 的核心在於讓您的開發體驗更流暢

  • 透過新的 app/ 目錄結構，實現更清晰的專案組織
  • 更智慧的資料獲取 - 我們藉此機會解決了資料層的一些不一致性並改進了效能
  • 透過專案內部不同上下文（應用程式碼、伺服器程式碼、shared/ 資料夾和配置）之間的分離，實現更好的 TypeScript 支援
  • 透過採用內部套接字和更快的 CLI，實現更快的 CLI 和開發

為什麼是這些特定的功能？主要是因為這些改進需要進行技術上的破壞性變更。

總的來說，我們力求對版本釋出採取一種“無炒作”的方法。我們一直在 Nuxt 3 的次要版本中釋出改進，而不是將功能累積起來以進行一次大發布。

我們還花費了大量時間研究如何以向後相容的方式實現這些變更，我希望這意味著大多數 Nuxt 3 專案可以以最小的努力進行升級。

我建議您在開始之前通讀升級指南，以瞭解您的應用程式可能受影響的區域。

🗂️ 新的專案結構

最大的可見變化是專案組織方式。您的應用程式程式碼現在預設位於 app/ 目錄中

my-nuxt-app/
├─ app/
│  ├─ assets/
│  ├─ components/
│  ├─ composables/
│  ├─ layouts/
│  ├─ middleware/
│  ├─ pages/
│  ├─ plugins/
│  ├─ utils/
│  ├─ app.vue
│  ├─ app.config.ts
│  └─ error.vue
├─ content/
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.ts

這有助於將您的程式碼與 node_modules/ 和 .git/ 分開，從而加快檔案監視器的速度（尤其是在 Windows 和 Linux 上）。它還為您的 IDE 提供了更好的上下文，判斷您正在處理客戶端程式碼還是伺服器程式碼。

不想遷移？ 完全沒問題！Nuxt 會檢測您現有的結構並繼續按以前的方式工作。

🎨 更新的 UI 模板

Nuxt 的起始模板煥然一新，改進了可訪問性、預設標題和模板潤色（#27843).

🔄 更智慧的資料獲取

我們改進了 useAsyncData 和 useFetch 的工作方式。多個元件使用相同的鍵現在會自動共享它們的資料。元件解除安裝時還會自動清理，您可以使用響應式鍵在需要時重新獲取資料。此外，我們還為您提供了更多控制，可以決定何時使用快取資料。

其中一些功能已經在 Nuxt v3 的次要版本中提供，因為我們一直在逐步推出這些功能。Nuxt v4 帶來了不同的預設設定，我們預計在未來繼續改進這個資料層。

🔧 更好的 TypeScript 體驗

Nuxt 現在為您的應用程式碼、伺服器程式碼、shared/ 資料夾和構建器程式碼建立單獨的 TypeScript 專案。這意味著在不同上下文中工作時，自動補全會更好、型別推斷更準確，並且會減少令人困惑的錯誤。

使用 Nuxt 4，您只需要在專案根目錄中有一個 tsconfig.json 檔案！

這可能是升級時最可能導致意外的單個問題，但從長遠來看，它也應該使您的 TypeScript 體驗更加流暢。請報告您遇到的任何問題。🙏

⚡ 更快的 CLI 和開發

在釋出 v4 的同時，我們一直在努力加快 @nuxt/cli 的速度。

  • 更快的冷啟動 - 開發伺服器啟動速度明顯加快
  • Node.js 編譯快取 - 自動重用 v8 編譯快取
  • 原生檔案監視 - 使用 fs.watch API，佔用更少的系統資源
  • 基於套接字的通訊 - CLI 和 Vite 開發伺服器現在透過內部套接字而不是網路埠進行通訊，減少了開銷——尤其是在 Windows 上

這些改進結合起來可以對您的日常開發體驗產生非常顯著的影響，我們還有更多的計劃。

🚀 如何升級

儘管任何主要版本都會帶來破壞性變更，但我們釋出此版本的主要目標之一是確保升級路徑儘可能順利。大多數破壞性變更已透過相容性標誌測試了一年多。

大多數專案都應該順利升級，但有一些事項需要注意

  • Nuxt 2 相容性已從 @nuxt/kit 中移除。（這尤其會影響模組作者。）
  • 一些舊的實用程式和已棄用的功能已被清理。
  • 新的 TypeScript 設定可能會暴露以前隱藏的一些型別問題。
  • 一些模組可能需要進一步更新才能完全相容 Nuxt 4。

不過別擔心——對於大多數破壞性變更，都有配置選項可以恢復舊行為，以便您進行調整。

1. 更新 Nuxt

我們建議您執行以下命令進行升級：

npx nuxt upgrade --dedupe

這將對您的鎖定檔案進行去重，並幫助確保您從 Nuxt 依賴的其他依賴項（尤其是在 unjs 生態系統中）中獲取更新。

2. 可選：使用遷移工具

我們還與Codemod合作，以自動化許多（但不是全部）遷移步驟

npx codemod@latest nuxt/4/migration-recipe

3. 測試和調整

執行您的測試，檢查一切是否正確構建，並修復出現的任何問題。升級指南中包含了針對特定場景的詳細遷移步驟。

我們建議您在開始升級之前完整閱讀它，以瞭解您的應用程式可能受影響的區域。

🗺️ 接下來是什麼？

我們計劃釋出快速補丁版本來解決出現的任何問題。Nuxt 3 將繼續接收維護更新（包括錯誤修復和 Nuxt 4 功能的回溯），直到 2026 年 1 月底，因此如果您需要時間進行遷移，不必著急。

展望未來，我們計劃更快地釋出 Nuxt 5，它將帶來 Nitro v3 和 h3 v2，以獲得更好的效能，並採用 Vite 環境 API 以改善（並加快！）開發體驗。還有更多內容正在開發中！

而且，除了主要版本之外，我們還計劃了許多令人興奮的功能，將進入 Nuxt 3.x 和 4.x 釋出分支，包括對 SSR 流媒體的支援（#4753）、第一方可訪問性模組（#23255）、內建獲取快取策略（#26017）、更強型別的獲取呼叫（將在 Nitro v3 中推出）、動態路由發現（#32196）、多應用支援（#21635）等等。

❤️ 感謝

此版本歸功於許多人，特別是過去一年中一直在測試 v4 相容模式的人。我真的很感激——感謝你們所有的幫助！

祝您使用 Nuxt 4 愉快編碼！🚀

📑 完整發布說明

閱讀 Nuxt v4.0.0 的完整發布說明。

衷心感謝所有參與本次釋出的人。❤️

← 返回部落格
Nuxt 在領英上Nuxt on BlueskyNuxt 在 X 上