概览
缩小与 Nuxt 3 的差异,减少迁移到 Nuxt 3 的负担。
如果你正在开启一个新的 Nuxt 3 项目,请跳过本节,直接前往 Nuxt 3 安装。
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
yarn install
pnpm install
bun install
安装完成后,请确认开发和生产构建均按预期工作,然后再继续下一步。
安装 Nuxt Bridge
将 @nuxt/bridge
和 nuxi
作为开发依赖安装:
npm install -D @nuxt/bridge nuxi
yarn add --dev @nuxt/bridge nuxi
pnpm add -D @nuxt/bridge nuxi
bun add -D @nuxt/bridge nuxi
nuxt.config
更新
请确保你的配置文件中避免使用诸如 module.exports
、require
或 require.resolve
的 CommonJS 语法。这些语法很快将被废弃且不再支持。
你可以改用静态 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 模块。请查阅 原生 ES 模块 了解更多信息和升级指南。