Vercel部署Express应用后页面空白且自动下载server.ts问题求助

核心配置检查（vercel.json） #

• 确认vercel.json是否正确配置服务端函数入口与路由规则，Vercel对Node.js函数的路径识别有严格要求，示例正确配置：

{
  "functions": {
    "api/**/*.ts": {
      "runtime": "@vercel/node@3"
    }
  },
  "routes": [
    { "src": "/(.*)", "dest": "/api/server.ts" }
  ]
}

• 注意：若你的Express入口为server.ts，必须放在api目录下（Vercel默认识别api目录下的文件为服务端函数）；若文件不在api目录，需在functions字段中指定正确路径。

package.json脚本与编译配置检查 #

• 确认scripts中的build命令能正确编译TS文件（若为TS项目）：

{
  "scripts": {
    "build": "tsc",
    "dev": "ts-node server.ts"
  }
}

• 检查tsconfig.json的outDir配置，确保编译后的JS文件路径能被Vercel识别，示例：

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES2020",
    "module": "commonjs"
  }
}

若使用了outDir，vercel.json中的函数路径需指向编译后的文件，比如dist/api/server.js。

文件夹结构验证 #

• 必须符合Vercel Node.js项目规范：
  • 服务端入口文件放在api目录下（如api/server.ts）
  • 前端静态文件（若有）放在public目录
  • 禁止将server.ts放在根目录——Vercel会将根目录文件当作静态资源处理，这就是点击页面会下载server.ts的直接原因。

其他关键排查点 #

• 确保Express应用未硬编码端口，Vercel会自动分配端口，正确写法：

import express from 'express';
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World');
});

// 无需监听固定端口，直接导出app即可
export default app;

• 检查Vercel项目设置中的Build & Development Settings，确认框架选择为Node.js，且Build Command与package.json中的配置一致。

内容的提问来源于stack exchange，提问作者Kulit Jeruk