Vue Academy · 课时

面向 Vue SPA 的 Fastify 后端

Q: 「面向 Vue SPA 的 Fastify 后端」这节课中我会学到什么？

Fastify 路由、CORS、提供静态 Vue 构建文件、速率限制，以及请求验证 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

Fastify 路由、CORS、提供静态 Vue 构建文件、速率限制，以及请求验证

面向 Vue SPA 的 Fastify 后端 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

为什么选择 Fastify 构建 Vue SPA

Fastify 是一个快速、低开销的 Node.js Web 框架，拥有完善的插件生态和内置的模式验证功能。它非常适合作为 Vue 单页应用的 API 后端，也可以提供构建后的静态文件。

使用日志记录器创建服务器

使用 logger: true 实例化 Fastify，即可开箱即用地通过 Pino 获得结构化的请求日志。这对于调试来自 Vue 应用的 API 调用非常有价值。

import Fastify from 'fastify'

const app = Fastify({
  logger: true
})

await app.listen({ port: 3000, host: '0.0.0.0' })

Vue 开发服务器的 CORS

在开发期间，Vue 应用运行在不同的源上（例如 localhost:5173）。注册 @fastify/cors 并允许该源，这样浏览器才会允许跨源 API 调用。

import cors from '@fastify/cors'

await app.register(cors, {
  origin: 'http://localhost:5173',
  credentials: true // allow cookies
})

提供构建后的 Vue 静态文件

在生产环境中，您需要提供编译后的 Vue 应用。注册 @fastify/static 并将其指向 dist 目录，这样 Fastify 就能提供 index.html 和资源文件。

import fastifyStatic from '@fastify/static'
import { join } from 'node:path'

await app.register(fastifyStatic, {
  root: join(process.cwd(), 'dist'),
  prefix: '/'
})

SPA 回退路由

Vue SPA 使用客户端路由，因此未知路径必须返回 index.html，而不是 404。添加一个通配符回退路由来提供应用外壳，这样刷新页面时深层链接也能正常工作。

app.setNotFoundHandler((req, reply) => {
  // let the Vue router handle non-API paths
  if (req.url.startsWith('/api')) {
    return reply.code(404).send({ error: 'Not found' })
  }
  return reply.sendFile('index.html')
})

速率限制

使用 @fastify/rate-limit 保护 API 免受滥用。配置每个客户端在每个时间窗口内允许的最大请求数。

import rateLimit from '@fastify/rate-limit'

await app.register(rateLimit, {
  max: 100,            // requests
  timeWindow: '1 minute'
})

路由上的模式验证

Fastify 使用 JSON Schema 进行验证和序列化。定义一个 body 模式后，Fastify 会在处理程序运行前拒绝无效的载荷并返回 400——无需手动验证。

app.post('/api/users', {
  schema: {
    body: {
      type: 'object',
      required: ['email', 'name'],
      properties: {
        email: { type: 'string', format: 'email' },
        name: { type: 'string', minLength: 1 }
      }
    }
  }
}, async (req) => {
  return createUser(req.body)
})

使用响应模式提升速度

添加 response 模式后，Fastify 可以使用快速的编译型序列化器来序列化输出，并移除模式中未定义的字段，从而同时提升性能和安全性。

app.get('/api/users/:id', {
  schema: {
    response: {
      200: {
        type: 'object',
        properties: {
          id: { type: 'number' },
          name: { type: 'string' }
          // password is omitted, never serialized
        }
      }
    }
  }
}, getUserHandler)

将路由组织为插件

Fastify 鼓励使用封装：将相关路由分组到插件中，并在指定前缀下注册。随着 API 不断扩展，这能让 API 保持模块化。

async function userRoutes(app) {
  app.get('/', listUsers)
  app.post('/', createUser)
}

await app.register(userRoutes, { prefix: '/api/users' })

插件注册顺序

顺序很重要：先注册跨领域插件（cors、rate-limit），再注册路由，最后注册静态文件和 SPA 回退。这样 API 路由会先被匹配，而不是由捕获所有路径的路由提供 index.html。

await app.register(cors, corsOpts)
await app.register(rateLimit, rlOpts)
await app.register(userRoutes, { prefix: '/api/users' })
await app.register(fastifyStatic, staticOpts) // last

开发环境与生产环境策略

在开发环境中，分别运行 Vite 开发服务器和 Fastify，并依靠 CORS 进行通信。在生产环境中，构建 Vue 应用，并让 Fastify 从同一源提供 dist 目录的内容——无需 CORS，也只需一个可部署的进程。

快速检查

测试您对 Fastify 后端的理解。

回顾

您已经学会了如何为 Vue SPA 构建 Fastify 后端：

logger: true 可提供结构化的请求日志
@fastify/cors 允许 Vue 开发服务器的源
@fastify/static 提供构建后的 dist；通配符回退支持 SPA 路由
@fastify/rate-limit 可防止滥用
JSON Schema 能够安全、快速地验证请求体并序列化响应

常见问题解答

「面向 Vue SPA 的 Fastify 后端」课时是免费的吗？

是的 — 「面向 Vue SPA 的 Fastify 后端」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「面向 Vue SPA 的 Fastify 后端」这节课中我会学到什么？

Fastify 路由、CORS、提供静态 Vue 构建文件、速率限制，以及请求验证你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「面向 Vue SPA 的 Fastify 后端」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy