概述
减少与 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
更新
请确保在您的配置文件中避免使用任何 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 模块。请查看 原生 ES 模块 以获取更多信息和升级指引。