如何配置Vercel部署Vite+React SSR应用的dist/server与dist/client文件夹？

你之前错误使用了vercel.json中的cache字段——这个字段用于配置构建缓存规则，并非指定要部署的输出文件。要让Vercel正确识别并部署dist/server（SSR服务端代码）和dist/client（静态资源），需按以下方式调整配置：

1. 修正vercel.json配置 #

替换原有配置为以下内容，根据项目实际入口路径调整：

{
  "version": 3,
  "functions": {
    "dist/server/index.js": {
      "runtime": "@vercel/node@20.x" // 匹配你本地使用的Node版本
    }
  },
  "public": "dist/client", // 指定静态资源存放目录
  "routes": [
    {
      "src": "/(.*)", // 将所有请求转发到SSR服务
      "dest": "dist/server/index.js"
    }
  ],
  "buildCommand": "npm run build" // 确保Vercel执行正确的构建命令
}

2. 确认package.json构建命令有效性 #

确保package.json中的build命令能正确生成两个dist子目录：

"scripts": {
  "build": "npm run build:client && npm run build:server",
  "build:client": "vite build --outDir dist/client",
  "build:server": "vite build --ssr src/entry-server.js --outDir dist/server"
}

（注：src/entry-server.js为你的SSR入口文件路径，需根据项目实际修改）

3. 保证SSR入口文件符合Vercel要求 #

你的Express SSR入口文件（如dist/server/index.js）需正确导出Express应用实例：

const express = require('express');
const app = express();

// 静态资源服务可由Vercel的public目录自动处理，也可保留本地逻辑
app.use(express.static('dist/client'));

// 你的SSR渲染逻辑、路由处理等代码

module.exports = app;

若项目使用ESM（package.json中配置了"type": "module"），则调整为：

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

// 逻辑同上

export default app;

4. 验证构建与部署 #

提交修改后，在Vercel控制台查看构建日志，确认：

• 构建命令执行成功，生成了dist/server和dist/client目录
• Vercel识别到了Serverless Function（对应dist/server/index.js）和静态资源目录

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