遷移至 Nuxt Bridge：概述

如果您要開始一個全新的 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 來代替。也可以使用 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 模組。請查看原生 ES 模組以取得更多資訊和升級。

版本

探索 Nuxt 和 Nuxt 官方模組的最新版本。

TypeScript

瞭解如何在 Nuxt Bridge 中使用 TypeScript。

概述

第一步