【Nuxt3系列十六】升级指南（准备迎接Nuxt4）ps: 我跳过了测试的部分，如果你需要运行单测，去官方看升级Nux

ps: 我跳过了测试的部分，如果你需要运行单测，去官方看

升级Nuxt

测试版本

请看nightly release channel

测试Nuxt4

计划中的 Nuxt 4 发布日期为 6 月 14 日之前（虽然这显然取决于 Nitro 主要版本发布后有足够的社区测试时间，所以请注意这不是确切日期）。

在此之前，可以从 Nuxt 3.12+ 版本开始测试 Nuxt 4 的许多破坏性变更。

加入Nuxt4

首先，升级Nuxt到最新版

然后在Nuxt中设置compatibilityVersion，这样就可以用上一些Nuxt4的特性

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // To re-enable _all_ Nuxt v3 behavior, set the following options:
  // srcDir: '.',
  // dir: {
  //   app: 'app'
  // },
  // experimental: {
  //   sharedPrerenderData: false,
  //   compileTemplate: true,
  //   resetAsyncDataToUndefined: true,
  //   templateUtils: true,
  //   relativeWatchPaths: true,
  //   defaults: {
  //     useAsyncData: {
  //       deep: true
  //     }
  //   }
  // },
  // unhead: {
  //   renderSSRHeadOptions: {
  //     omitLineBreaks: false
  //   }
  // }
})

当你将 compatibilityVersion 设置为 4 时，整个 Nuxt 配置中的默认值会更改为采用 Nuxt v4 的行为，但在测试过程中你可以逐项重新启用 Nuxt v3 的行为，具体可以参考上面注释掉的行。

迁移到 Nuxt 4

在此列出破坏性或重要的变更，以及为了向前或向后兼容而需要采取的迁移步骤。此部分在最终发布前可能会有所更改，因此如果你使用 compatibilityVersion: 4 测试 Nuxt 4，请定期查看这部分内容。

使用 Codemods 迁移我不想再引入一个新的东西了，这部分我就省略

新的目录结构（重要）

Nuxt4的目录结构发生了重大变化，但是保持向后兼容性。你不改也能跑

查看完整说明

新的 Nuxt 默认 srcDir 是 app/，并且大多数东西都是从那里解析的。
serverDir 现在默认为 <rootDir>/server 而不是 <srcDir>/server。
layers/, modules/ 和 public/ 默认相对于 <rootDir> 解析。
如果使用 Nuxt Content v2.13+，content/ 相对于 <rootDir> 解析。
添加了一个新的 dir.app，这是我们查找 router.options.ts 和 spa-loading-template.html 的目录 —— 这个默认为 <srcDir>/。

示例：

.output/
.nuxt/
app/
  assets/
  components/
  composables/
  layouts/
  middleware/
  pages/
  plugins/
  utils/
  app.config.ts
  app.vue
  router.options.ts
content/
layers/
modules/
node_modules/
public/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nuxt.config.ts

为什么这么改：

性能 - 将所有代码放在仓库的根目录会导致 .git/ 和 node_modules/ 文件夹被文件系统观察器扫描/包含，这可能会显著延迟非 macOS 系统上的启动时间。
IDE 类型安全性 - server/ 和应用的其余部分运行在两个完全不同的上下文中，具有不同的全局导入可用，确保 server/ 不位于应用其他部分的同一文件夹内是确保你在 IDE 中获得良好自动补全功能的重要第一步。

迁移步骤

创建一个名为 app/ 的新目录。
将你的 assets/, components/, composables/, layouts/, middleware/, pages/, plugins/ 和 utils/ 文件夹移动到该目录下，同时包括 app.vue, error.vue, app.config.ts。如果你有 app/router-options.ts 或 app/spa-loading-template.html，这些文件路径保持不变。
确保你的 nuxt.config.ts, content/, layers/, modules/, public/ 和 server/ 文件夹仍然位于 app/ 目录之外，在项目的根目录中。

写到这里，发现升级还是言之过早，等后续正式发版我再研究吧。就这样

【Nuxt3系列十六】升级指南（准备迎接Nuxt4）