Nuxt 4 正式发布！

作者：前端界

原文：mp.weixin.qq.com/s/HAN31v9vl...

经过一年多的实战测试，Nuxt 4.0 正式发布了！ 这是一个专注于稳定性和开发者体验的重大版本更新，在提升性能、代码结构、类型系统等方面做出了诸多优化。如果你正在使用 Nuxt 3，升级将会非常平滑！

核心亮点

1. 更清晰的项目结构：新增 `app/` 目录

Nuxt 4 推出了一种新的默认项目结构，把你的应用代码集中到 app/ 目录中，使得客户端代码、服务器端代码和配置之间更加清晰分离：

csharp 复制代码

my-nuxt-app/
├─ app/             # 应用核心代码
│  ├─ components/
│  ├─ pages/
│  ├─ layouts/
│  └─ app.vue
├─ public/
├─ shared/         # 通用工具库
├─ server/
└─ nuxt.config.ts

✅ 如果你不想迁移，Nuxt 也会自动识别旧结构，保持兼容！

2. `useAsyncData` 和 `useFetch` 升级

Nuxt 4 对数据获取进行了大幅优化,可以更智能获取数据：

相同 key 的组件共享数据，避免重复请求
组件卸载时自动清理缓存
支持响应式 key 重新触发请求
更可控的缓存策略

示例代码：

php 复制代码

const { data, pending, refresh } = await useFetch('/api/posts', {
  key: 'posts',
  server: true,
  lazy: true
})

你可以通过 refresh() 手动触发数据更新，或用 watch() 响应变化。

3. 更优秀的 TypeScript 体验

Nuxt 4 使用 多项目结构（project references） ，将 app、server、shared、builder 等上下文分离，提高类型推断准确性。

只需一个 tsconfig.json 即可：

perl 复制代码

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["@nuxt/types"]
  }
}

你将获得更少的类型错误和更强的自动补全支持！

4. 更快的 CLI 与开发体验

Nuxt CLI 在性能上也做了不少优化：

冷启动更快
使用 V8 编译缓存
原生文件监听（更省资源）
CLI 与 Vite 通过 socket 通信（减少网络开销）

尤其是在 Windows 和大型项目中，这些改进会非常明显！

如何升级到 Nuxt 4？

Nuxt 4 的升级非常平滑，推荐按以下步骤进行：

第一步：一键升级

使用官方命令自动升级并去重依赖：

css 复制代码

npx nuxt upgrade --dedupe

第二步：使用 Codemod 自动迁移（可选）

bash 复制代码

npx codemod@latest nuxt/4/migration-recipe

该工具可以自动处理部分兼容性变更，特别适合项目较大的同学使用。

第三步：测试与调整

运行你的测试、查看构建结果，根据升级指南（nuxt.com/docs/4.x/ge... 检查是否有需要手动修复的地方。比如：

清理弃用的 API
检查 ts 类型是否有报错
更新不兼容的模块（极少数）

未来路线图：Nuxt 5 与更多功能

虽然 Nuxt 4 才刚刚发布，但 Nuxt 团队已经计划 Nuxt 5 将引入：

Nitro v3 + h3 v2 性能再还能更秀
Vite 环境 API 支持
更强的 SSR 流式渲染
内置缓存策略、动态路由发现
多应用支持（multi-app）

最后

Nuxt 4 是一次以稳定和开发体验为核心的进化，它没有一味追求"炫酷"的新特性，而是逐步打磨每一处细节，让开发者写得更安心、改得更省心、跑得更顺心。

如果你已经在使用 Nuxt 3，升级会非常顺滑。如果你还在 Nuxt 2，也许这正是切换的好时机。

📘 官方文档：nuxt.com

🎉 快试试 Nuxt 4 吧！