概述
减少与 Nuxt 3 的差异,降低迁移到 Nuxt 3 的负担。
如果您正在开始一个新的 Nuxt 3 项目,请跳过此部分,前往 Nuxt 3 安装。
Nuxt Bridge 提供与 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 可以逐步进行。下面的 升级步骤 不需要一次性完成。
从 CommonJS 迁移到 ESM
Nuxt 3 原生支持 TypeScript 和 ECMAScript 模块。