Vue+Express架构：同一端口下区分页面渲染通配路由与API请求

嘿，这个问题其实很好解决，核心就是利用Express路由的匹配顺序——它会严格按照你定义路由的先后顺序来尝试匹配请求路径，所以只要把你的API路由放在那个通配路由之前就行！

基础实现：按顺序定义路由 #

直接在你的Express主文件里，先写所有API相关的路由，最后再写那个用于返回Vue页面的通配路由。这样当请求过来时，Express会先检查是否匹配API路由，匹配到就直接返回API响应；如果没匹配到任何API路由，才会走到通配路由，返回Vue的index.html。

示例代码：

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

// 1. 先定义所有API路由，顺序很重要！
app.get('/api/login', (req, res) => {
  res.json({ message: 'Welcome to the API' });
});

// 可以添加更多API路由，比如POST请求
app.post('/api/register', (req, res) => {
  // 这里写你的注册逻辑
  res.json({ success: true, message: 'Registration successful' });
});

// 2. 最后定义通配路由，处理Vue页面渲染
app.get('*', (req, res) => {
  // 假设indexHTML是你预先读取的Vue打包后的index.html内容
  res.write(indexHTML);
  res.end();
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

进阶方案：模块化API路由 #

如果你的API路由很多，建议用express.Router()把API路由模块化，这样代码更清晰，维护起来也方便。

步骤1：创建单独的API路由文件（比如routes/api.js）

const router = require('express').Router();

// 登录接口
router.get('/login', (req, res) => {
  res.json({ message: 'Welcome to the API' });
});

// 注册接口
router.post('/register', (req, res) => {
  res.json({ success: true, message: 'Registration successful' });
});

// 可以添加更多API接口...
module.exports = router;

步骤2：在主文件中挂载API路由，再定义通配路由

const express = require('express');
const app = express();
const apiRouter = require('./routes/api');

// 挂载API路由，所有以/api开头的请求都会进入这个路由处理
app.use('/api', apiRouter);

// 最后处理页面渲染的通配路由
app.get('*', (req, res) => {
  res.write(indexHTML);
  res.end();
});

app.listen(3000);

关键注意点 #

• 路由顺序绝对不能搞反：如果把通配路由放在API路由前面，所有请求（包括API请求）都会被通配路由拦截，返回Vue的HTML页面，API就无法正常响应了。
• HTTP方法要对应：你的API如果用POST/PUT/DELETE等方法，一定要在路由里用对应的app.post()/app.put()等，通配路由只用app.get('*')就够了，因为前端路由的跳转都是GET请求，其他HTTP方法的请求不会被这个通配路由匹配到。
• 如果需要处理POST请求的参数，记得在主文件里加上app.use(express.json())或者app.use(express.urlencoded({ extended: true }))来解析请求体。

这样配置后，访问http://localhost:3000/api/login会返回API的JSON响应，访问其他路径比如http://localhost:3000/home或者http://localhost:3000/profile都会返回Vue的index.html，前端路由就能正常工作啦！

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