如何配置Vercel将编译后的index.js识别为Serverless函数而非静态文件？

方案1：通过vercel.json指定dist内的函数目录（官方支持） #

Vercel允许通过vercel.json的functions字段，明确指定输出目录内的文件作为Serverless函数，无需修改输出路径到根目录。

步骤： #

1. 确保Hono入口文件正确导出Vercel兼容的handler：

// src/index.ts
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

const app = new Hono()
app.get('/api/hello', (c) => c.text('Hello from Hono!'))

export default handle(app)

2. 调整vercel.json配置，指定函数目录并保留静态资源输出配置：

{
  "outputDirectory": "dist",
  "functions": {
    "dist/functions/**/*.js": {
      "runtime": "@vercel/node@20.x"
    }
  },
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/dist/functions/index.js"
    },
    {
      "source": "/:path*",
      "destination": "/vite/assets/:path*"
    }
  ]
}

• functions字段告知Vercel：dist/functions下的所有JS文件均为Serverless函数，使用指定的Node runtime。
• rewrites规则确保API请求路由到函数，静态资源请求路由到Vite构建目录。

方案2：将函数文件复制到根目录/api（绕过outputDirectory限制） #

如果偏好Vercel默认的api目录识别规则，可在构建阶段将编译后的函数文件从dist/functions复制到根目录api，无需修改tsup的基础输出路径。

步骤： #

1. 修改package.json的构建命令，添加复制步骤：

{
  "scripts": {
    "build": "tsup src/index.ts --out-dir dist/functions && mkdir -p api && cp dist/functions/index.js api/index.js && vite build --out-dir dist/vite"
  }
}

• 先通过tsup编译函数到dist/functions，再将文件复制到根目录api，最后构建静态资源到dist/vite。

2. 调整vercel.json配置，设置重写规则：

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/index.js"
    },
    {
      "source": "/:path*",
      "destination": "/dist/vite/assets/:path*"
    }
  ]
}

Vercel会自动识别根目录api下的文件为Serverless函数，无需额外配置functions字段。

注意事项 #

• 确保tsup编译配置生成兼容Node环境的代码（比如设置format: 'cjs'或'esm'，匹配Vercel runtime要求）。
• 若使用monorepo，需保证vercel.json配置在当前package目录下，或在根目录vercel.json中通过projects字段指定该package的配置。

内容的提问来源于stack exchange，提问作者Davi Lima