概覽

減少與 Nuxt 3 的差異，降低遷移到 Nuxt 3 的負擔。
如果您正在啟動一個全新的 Nuxt 3 專案，請跳過此部分，直接訪問 Nuxt 3 安裝。
Nuxt Bridge 提供與 Nuxt 3 相同的功能 (文件)，但有一些限制，特別是 useAsyncData 和 useFetch 組合式函式不可用。請閱讀本頁其餘部分以獲取詳細資訊。

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

使用 Nuxt Bridge，您可以確保您的專案（幾乎）已為 Nuxt 3 做好準備，並可以逐步進行向 Nuxt 3 的過渡。

第一步

升級 Nuxt 2

確保您的開發伺服器 (nuxt dev) 未執行，刪除任何包鎖檔案 (package-lock.json 和 yarn.lock)，然後安裝最新的 Nuxt 2 版本

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

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

npm install
安裝完成後，請確保開發和生產構建都按預期工作，然後再繼續。

安裝 Nuxt Bridge

安裝 @nuxt/bridge 和 nuxi 作為開發依賴項

npm install -D @nuxt/bridge nuxi

更新 nuxt.config

請務必避免在您的配置檔案中使用任何 CommonJS 語法，例如 module.exports、require 或 require.resolve。它將很快被棄用且不受支援。

您可以使用靜態 import、動態 import() 和 export default 代替。透過重新命名為 nuxt.config.ts 來使用 TypeScript 也是可能且推薦的。

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 模組。