透過超過 100 條秘訣學習 Nuxt!

概觀

減少與 Nuxt 3 的差異,並減輕遷移至 Nuxt 3 的負擔。
如果您要開始一個全新的 Nuxt 3 專案,請跳過此章節並前往「Nuxt 3 安裝」。
Nuxt Bridge 提供與 Nuxt 3 (文件) 相同的功能,但仍有一些限制,特別是 useAsyncDatauseFetch composables 無法使用。請閱讀本頁其餘部分以瞭解詳細資訊。

Bridge 是一個向前相容層,讓您只需安裝並啟用 Nuxt 模組,即可體驗許多 Nuxt 3 的新功能。

使用 Nuxt Bridge,您可以確保您的專案(幾乎)已準備好迎接 Nuxt 3,並且可以逐步進行到 Nuxt 3 的轉換。

第一步

升級 Nuxt 2

請確保您的開發伺服器 (nuxt dev) 未執行,移除任何套件鎖定檔 (package-lock.jsonyarn.lock),並安裝最新的 Nuxt 2 版本

package.json
- "nuxt": "^2.16.3"
+ "nuxt": "^2.17.3"

然後,重新安裝您的依賴項

npm install
安裝完成後,請確保開發和生產版本組建皆如預期般運作,再繼續進行。

安裝 Nuxt Bridge

安裝 @nuxt/bridgenuxi 作為開發依賴項

npm install -D @nuxt/bridge nuxi

更新 nuxt.config

請確保避免在您的設定檔中使用任何 CommonJS 語法,例如 module.exportsrequirerequire.resolve。這些語法即將被棄用且不再支援。

您可以改用靜態 import、動態 import()export default。也建議使用 TypeScript,方法是重新命名為 nuxt.config.ts

nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: false
})

更新指令

nuxt 指令現在應變更為 nuxt2 指令。

{
  "scripts": {
-   "dev": "nuxt",
+   "dev": "nuxt2",
-   "build": "nuxt build",
+   "build": "nuxt2 build",
-   "start": "nuxt start",
+   "start": "nuxt2 start"
  }
}

在這裡嘗試執行一次 nuxt2。您會看到應用程式如先前一樣運作。

(如果 'bridge' 設定為 false,您的應用程式將如先前一樣運作,而不會有任何變更。)

升級步驟

透過 Nuxt Bridge,遷移至 Nuxt 3 可以逐步進行。以下「升級步驟」不需要一次完成。

從 CommonJS 遷移至 ESM

Nuxt 3 原生支援 TypeScript 和 ECMAScript Modules。請查看原生 ES Modules以取得更多資訊和升級說明。