前言
今天带大家看看尤雨溪在推特墙裂推荐的 Nitro v3 这个库!

往期精彩推荐
- 字节也在用的 @tanstack/react-query 到底有多好用!🔥🔥🔥
- 🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
- 🔥🔥🔥 原来在字节写代码就是这么朴实无华!🔥🔥🔥
- 更多精彩文章欢迎关注我的公众号:萌萌哒草头将军
正文
Nitro 是一个全栈框架,兼容任何运行时。
Nitro v3 可以通过 Vite 插件形式集成,扩展 dev 服务器为生产服务器,支持 vite build
统一输出前后端代码。
快速启动与渐进集成
Nitro 支持 npx create-nitro-app
一键创建项目,或在现有 Vite 项目中安装 nitro
包并添加插件:
javascript
import { defineConfig } from "vite";
import { nitro } from "nitro/vite";
export default defineConfig({
plugins: [nitro()]
});
这样配置后 Vite 的 HMR 无缝延伸至后端路由和 API,可以在单一项目中处理前后端逻辑,无需切换工具链。
路由与生命周期优化
Nitro 的文件系统路由(routes/
目录)与 Vite 的模块解析结合,自动映射API端点,支持动态参数、方法特定(如.get.ts
)和中间件。
bash
routes/
api/
test.ts <-- /api/test
hello.get.ts <-- /hello (GET only)
hello.post.ts <-- /hello (POST only)
文件中只需要通过函数暴露对象即可:
js
import { defineHandler } from "nitro/h3";
export default defineHandler(() => {
return { hello: "API" };
});
生命周期从路由规则到全局中间件,再到自定义服务器入口和渲染器,确保请求高效处理。
渲染器与SSR支持
Nitro 的渲染器(renderer)捕捉未匹配路由,支持自动 index.html
或自定义模板,使用 Rendu 预处理器注入动态内容。自定义渲染器通过defineRenderHandler
生成响应!
插件与扩展性
Nitro 插件(plugins/
目录)在启动时运行,支持钩子(如close
、error
、request
)扩展行为。
js
// nitro.config.ts
export default defineNitroPlugin((nitro) => {
nitro.hooks.hook("close", async () => {
// Will run when nitro is being closed
});
})
支持 hook 时机如下:
javascript
"close", () => {}
"error", (error, { event? }) => {}
"render:response", (response, { event }) => {}
"request", (event) => {}
"beforeResponse", (event, { body }) => {}
"afterResponse", (event, { body }) => {}
最后
Nitro v3 与 Vite 搭配,提供高效的全栈方案,从快速启动到路由渲染,再到插件扩展,可以全方位的优化工作流!
今天的分享就这些了,感谢大家的阅读,如果文章中存在错误的地方欢迎指正!
往期精彩推荐
- 字节也在用的 @tanstack/react-query 到底有多好用!🔥🔥🔥
- 🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
- 🔥🔥🔥 原来在字节写代码就是这么朴实无华!🔥🔥🔥
- 更多精彩文章欢迎关注我的公众号:萌萌哒草头将军