如何在Vercel的单个项目中同域名部署Node.js Express API与Vue.js应用

阿华AIGC实验室

2026-4-29

实现Vercel同域名部署Vue.js应用与Express API

我来帮你搞定这个问题！之前的脚本方案行不通是因为&&是串行执行，Vue的开发服务会一直占用进程，后面的API启动命令根本没机会执行，而且这只是本地开发的脚本逻辑，Vercel部署有自己的一套流程。下面是具体的实现步骤：

第一步：调整Express API的配置

首先要给你的Express接口加上统一的/api前缀，同时适配Vercel的Serverless运行环境：
在api/index.js里修改代码：

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

// 给所有API路由挂载/api前缀
app.use('/api', require('./routes/your-routes')); // 替换成你实际的路由文件路径

// 区分本地开发和Vercel生产环境
if (process.env.NODE_ENV === 'production') {
  // Vercel会把这个Express实例作为Serverless函数加载
  module.exports = app;
} else {
  // 本地开发时正常启动服务
  const PORT = process.env.PORT || 3001;
  app.listen(PORT, () => {
    console.log(`API服务运行在端口 ${PORT}`);
  });
}

第二步：配置根目录的`vercel.json`

在Vue项目的根目录（最外层文件夹）创建vercel.json文件，告诉Vercel如何处理路由和构建：

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "functions": {
    "api/index.js": {
      "runtime": "@vercel/node@20"
    }
  },
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/index.js"
    },
    {
      "src": "/(.*)",
      "dest": "/dist/$1"
    }
  ]
}

这个配置的作用：

指定Vue应用的构建命令和产物目录
标记api/index.js为Vercel的Node.js Serverless函数
路由规则：所有/api/开头的请求转发给Express处理，其他请求交给Vue的静态页面

第三步：本地开发的并行启动方案（可选）

如果想在本地同时跑Vue和API服务，推荐用concurrently工具并行启动，而不是串行：

先安装依赖：

npm install --save-dev concurrently

修改根目录package.json的脚本：

"scripts": {
  "serve": "concurrently \"vue-cli-service serve\" \"cd api && npm run start\"",
  "build": "vue-cli-service build",
  // 保留其他原有脚本
}

为了避免本地跨域，在Vue的vue.config.js里配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true
      }
    }
  }
}

这样本地访问localhost:8080/api/urls就会自动转发到Express的3001端口。