概览
减少与 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
deno 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
deno add -D npm:@nuxt/bridge npm: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 可以分步骤进行。下面的 Upgrade Steps 不需要一次性全部完成。
从 CommonJS 迁移到 ESM
Nuxt 3 原生支持 TypeScript 和 ECMAScript 模块。请查看 原生 ES 模块 了解更多信息和升级指南。