Vite 终于有了一个很轻的服务端搭档

CharlieWang
0 阅读4分钟

引言

企业微信截图_20260317100854.png

Vite 在官网上给自己的定位是“下一代 Web 构建工具”。这个定义很准确，也很克制：Vite 主要解决的是本地开发体验和构建效率，而不是完整的服务端问题。

但真实世界里的前端应用从来不是孤立存在的。它们通常还需要 API、数据库、身份认证、实时通信，甚至服务端渲染。换句话说，前端项目最终仍然需要一个服务端。Vite 本身并不负责这部分能力，但它始终为生态预留了足够的扩展空间，允许其他工具自然地构建在它之上。这恰恰也是 Vite 设计上最迷人的地方：边界清晰，但扩展能力很强。

今天的 Web 开发，早已不是把源文件原样发给浏览器那么简单。我们需要热模块替换（HMR）带来的即时反馈，需要代码分割来按需加载内容，需要摇树优化去除无用代码，也需要压缩与构建来降低传输成本。Webpack 推动了这一代工程化实践，而 Vite 则把这件事做得更轻、更快。

沿着 Vite 的生态继续往下看，你很容易注意到 Nitro。

企业微信截图_20260317100955.png

尤雨溪在谈到 Nitro v3 时，也给出过一个非常直接的评价：

Nitro v3 是我期待已久的 Vite 服务端配对方案。如果你想让 Vite 配上一些后端代码，快速完成一套简单的全栈配置，比如 SSR 和基于文件的路由，但又不想直接投入一个完整的元框架，那么这几乎就是你需要的全部。

企业微信截图_20260317105644.png

介绍 Nitro

如果你用过 Nuxt，那么你大概率对 Nitro 不陌生，因为它正是 Nuxt 的服务端引擎。Nitro 最早诞生于 Nuxt 3，目标也很明确：提供一个与部署环境解耦的服务端运行层。

不过，Nitro 现在早已不只是 Nuxt 的内部组件。 随着能力逐步独立，它已经开始扮演更通用的角色：既可以作为元框架的底层基础设施，也可以单独拿来构建服务端应用。

Nuxt.js 是一个基于 Vue.js 的全栈 Web 应用框架，用于快速构建支持服务端渲染（SSR）、静态生成（SSG）以及现代前端开发体验的应用。

企业微信截图_20260317110304.png

上周，前端是个发布周，不仅 Vite 升级到8，还发布了 Vite+ 这样革命性的工具。但是，很多不知道的是，Nitro v3 Beta 也悄悄发布了，它不是一次简单的小修小补，而是对底层架构的一次重新梳理：API 更精简，对 Web 标准更友好，也更贴近新一代工具链。

HDJgbX1WgAAet7w.jpg

Nitro v3 带来了什么

这次 v3 更新，至少带来了几个非常明确的变化：

  • 原生集成 Vite。 Nitro 现在提供官方 Vite 插件，可以直接为 React、Vue、Solid 等 Vite 项目补齐后端能力。
  • 依赖大幅瘦身。 依赖数量从 321 个降到了不足 20 个，安装、维护和理解成本都更低。
  • 包名更清晰。 Nitro v3 使用新的 NPM 包名 nitro，取代了旧的 nitropack。
  • HTTP 层保持开放。 你可以使用内置的文件系统路由，也可以通过 server.ts 完全掌控入口，并接入自己偏好的框架，例如 Elysia、h3 和 Hono。
  • 更彻底地拥抱 Web 标准。 Nitro v3 升级到 H3 v2，围绕 Request、Response、Headers 和 URL 等标准原语进行了全面重写，得到的是更简洁、也更容易跨平台迁移的服务端代码。

所以，如果只把 Nitro 理解为“Nuxt 的一部分”，其实已经低估它了。至少从 v3 开始，Nitro 更像是在明确自己的新定位：它正在成为一个面向现代 JavaScript 全栈开发的轻量服务端框架。

和 Vite 一起使用

如果你想直接从零开始，最快的方式就是使用 create-nitro-app：

pnpm dlx create-nitro-app

按照 CLI 提示完成初始化后，就可以直接启动开发服务器。

企业微信截图_20260317111056.png

如果你已经有一个现成的 Vite 项目，也可以把 Nitro 直接接进去，为项目补齐 API 路由、服务端渲染等能力：

pnpm i nitro vite

先把 Nitro 插件加到 vite.config.ts 中：

import { defineConfig } from "vite";
import { nitro } from "nitro/vite";

export default defineConfig({
  plugins: [nitro()],
});

然后创建一个 nitro.config.ts，告诉 Nitro 你的服务端代码放在哪里：

import { defineNitroConfig } from "nitro/config";

export default defineNitroConfig({
  serverDir: "./server",
});

这里的 serverDir 表示服务端目录。也就是说，接下来放在 server/ 里的路由和相关代码，都会由 Nitro 接管。

例如，在 server/api/test.ts 中创建你的第一个 API 路由：

import { defineHandler } from "nitro";

export default defineHandler(() => {
  return { message: "Hello Nitro!" };
});

Nitro 会根据文件路径自动生成路由，因此 server/api/test.ts 对应的访问地址就是 /api/test。

最后，启动开发服务器：

pnpm dev -- --open

现在，你就可以访问这个 API 路由了。

http://localhost:3000/api/test

写在最后

明天，我会继续讲讲我的开源项目，AI Elements Vue 和 Elevenlabs UI Vue 是怎么使用 Nitro 的，欢迎关注。

如果你觉得本文有用，一键三连（点赞、评论、转发），就是对我最大的支持。

avatar
文章
阅读
粉丝