在Vercel部署TypeScript+Express项目时遇404错误求助

问题诊断 #

从你的配置和描述来看，核心问题是Vercel构建规则冲突+路由/输出路径配置错误，导致构建命令未触发或产物无法被正确识别。

具体修复步骤 #

1. 重构vercel.json的构建逻辑（解决命令未执行问题） #

Vercel中builds数组的优先级高于顶层的buildCommand，你之前的配置里指向了构建后的dist/server.js，但这个文件在构建前不存在，直接导致Vercel跳过了编译步骤。调整如下：

{
  "version": 2,
  "builds": [
    {
      "src": "src/server.ts",
      "use": "@vercel/node",
      "config": {
        "command": "npm run build"
      }
    },
    {
      "src": "public/**/*",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/server.js"
    },
    {
      "src": "/public/(.*)",
      "dest": "/public/$1"
    }
  ]
}

• 把构建入口指向原始的src/server.ts，让Vercel触发TS编译流程
• 通过config.command强制指定构建命令，确保npm run build被执行
• 单独配置静态资源规则，用@vercel/static处理public目录

2. 调整TS配置适配Vercel Node环境 #

你的tsconfig.json用了ESNext模块规范，但Vercel的@vercel/node对CommonJS支持更稳定，修改如下：

{
  "compilerOptions": {
     "target": "ES2020",
     "module": "CommonJS", // 改为CommonJS
     "rootDir": "./src", 
     "moduleResolution": "node",
     "allowJs": false, 
     "outDir": "./dist",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true, 
     "strict": false,   
     "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["dist", "node_modules"]
}

同时删除package.json里的"type": "module"字段，避免模块加载冲突。

3. 简化package.json的构建脚本 #

合并冗余命令，确保模板文件复制逻辑正常：

{
  "name": "my-website",
  "version": "1.0.0",
  "description": "Landing page of my website. Meant to serve as a portal to my projects",
  "main": "./dist/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./dist/server.js",
    "build": "tsc && cpy \"src/**/*.mustache\" dist --parents",
    "type-check": "tsc -p tsconfig.json --noEmit"
  },
  // 依赖部分保持不变
}

4. 验证服务器模板路径 #

确保Express中模板文件的路径对应构建后的dist目录结构，比如：

// src/server.ts
import mustacheExpress from 'mustache-express';

app.engine('mustache', mustacheExpress());
app.set('views', './views'); // 构建后dist下会生成views子目录
app.set('view engine', 'mustache');

额外排查点 #

• 看Vercel构建日志的构建阶段，确认npm run build是否执行；如果还是没触发，先删除vercel.json的builds规则，手动在项目设置里指定构建命令npm run build测试
• 本地执行npm run build后，检查dist目录是否包含server.js、views目录等所有必要文件

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