Express 项目部署到 Vercel

664 字

3 分钟

Express 项目部署到 Vercel

2025-11-02

Vercel项目

Express

/

教程

/

网站搭建

第一步整理项目结构#

这里假定你的 Express 项目结构大致如下：

1
E:\html\pers-website\
2
├── index.js               # Express 入口
3
├── router.js              # 路由文件
4
├── public/                # 静态资源
5
│   ├── html/
6
│   │   └── home.html      # 首页
7
│   ├── css/
8
│   ├── js/
9
│   └── img/
10
├── node_modules/          # 依赖
11
└── package.json           # 已存在

第二步确保 package.json 正确#

修改 package.json 文件的内容使其看起来大致如下：

1
{
2
  "name": "pers-website",
3
  "version": "1.0.0",
4
  "main": "index.js",
5
  "scripts": {
6
    "start": "node index.js"
7
  },
8
  "engines": {
9
    "node": "22.x"  // 必须设置，避免 Vercel 报错
10
  },
11
  "dependencies": {
12
    "express": "^5.1.0"
13
  },
14
  "devDependencies": {
15
    "@vercel/node": "^5.3.12"
16
  }
17
}

第三步修改 index.js#

这一步用于导出实例，供 Vercel 使用。

1
const express = require('express');
2
const path = require('path');
3
const app = express();
4

5
// 引入路由
6
const router = require('./router');
7
app.use('/', router);
8

9
// 托管静态资源
10
app.use(express.static('public'));
11

12
// 仅在本地运行时启动服务器
13
if (require.main === module) {
14
  const port = process.env.PORT || 4000;
15
  app.listen(port, () => {
16
    console.log(`服务器运行在:${port}端口上`);
17
  });
18
}
19

20
// 必须导出 app，供 Vercel 使用
21
module.exports = app;

写的 app 导出的时候就导出成 module.exports = app; ，写别的就导成你写的，不过不推荐这么做，可能会识别错误
if (require.main === module) 也是要改的，注意别漏了。

第四步创建 api/index.js (Vercel 入口)#

创建文件夹 api/，并添加 api/index.js：

1
// api/index.js
2
const app = require('../index');
3

4
// Vercel Serverless Function 入口
5
module.exports = (req, res) => {
6
  app(req, res);
7
};

第五步创建 vercel.json (核心配置)#

在项目根目录创建 vercel.json：

1
{
2
  "routes": [
3
    // 1. API 请求交给 Serverless Function
4
    { "src": "^/api/(.*)$", "dest": "/api/index.js" },
5

6
    // 2. 静态资源：/html/* /css/* /js/* /img/*
7
    { "src": "^/(html|css|js|img)/(.+)$", "dest": "/public/$1/$2" },
8

9
    // 3. 根路径：308 永久重定向到 /html/home.html
10
    { "src": "^/$", "dest": "/html/home.html", "status": 308 }
11
  ]
12
}