Nuxt 4 迁移与项目架构

SonicToolLab 使用 Nuxt 4 实现服务端渲染、文件路由、服务端 API 与共享 Vue 组件架构。本文只介绍能从当前仓库验证的 Nuxt 4 用法，不对性能作笼统保证。

1. 全新的目录结构

在 Nuxt 4 中，最先被注意到的就是精简后的文件夹结构。转向 app/ 目录（我们的 pages/、components/ 和 assets/ 现在都位于此处）符合 Next.js 等框架的现代趋势，使业务逻辑与配置实现了更清晰的分离。

• 上下文分离：界面代码位于 app/，而 server/、public/、配置和共享基础设施保留在项目根目录。
• 自动导入：组件和组合式函数遵循 Nuxt 约定，减少重复导入，同时保持客户端与服务端上下文分离。

2. 性能与核心引擎

Nuxt 4 调整了数据获取、模块顺序、TypeScript 项目上下文和应用目录。实际加载性能仍取决于页面代码、第三方库、缓存与部署配置。

• 路由拆分：各工具使用独立路由，可将仅浏览器使用的库限制在需要它们的页面加载。
• 上下文类型：Nuxt 会生成应用、服务端、共享和构建时的独立 TypeScript 配置。

3. Nitro 服务端集成

Nuxt 使用 Nitro 作为服务端引擎，并生成可部署的 .output 目录。本项目由 Nitro 发现 server/api/ 下的处理器和 server/middleware/ 下的中间件；较长的 AI 任务使用显式队列与 Webhook 处理器，当前仓库没有使用 Nitro Task API。

4. 为什么 Nuxt 4 是工具站的完美选择

构建一个拥有 30 多个工具的网站需要极高的模块化。Nuxt 4 的组件架构允许我们编写一次共享 UI 逻辑（如输入区域、复制按钮和 SEO 注入器），并在所有工具中重复使用。

结论

选择 Nuxt 4 不仅仅是为了追求新技术，更是为了在保持代码库可扩展性的同时，提供最佳的用户体验。随着 Nuxt 4 的持续演进，我们将不断引入新特性，使这个工具箱始终保持在行业最前沿。