Node.js中Express的app.get通配符失效问题求助

问题原因 #

Vue Router使用history模式时，直接访问/home、/login这类非根路径，服务器会尝试寻找对应静态文件，找不到就返回404。需要让服务器将所有非API的GET请求都返回index.html，交由Vue Router前端处理路由。你的代码存在两个核心问题：

• 中间件顺序错误，导致通配符路由无法生效
• sendFile的路径写法错误，无法正确返回入口文件

修复方案 #

1. 确认Vue项目配置 #

确保Vue Router已开启history模式（src/router/index.js中）：

const router = createRouter({
  history: createWebHistory(), // 必须是history模式，而非hash模式
  routes: [...]
})

2. 修改Express服务器代码 #

调整中间件顺序，修正sendFile路径，添加正确的通配符GET路由：

/* eslint-disable no-console */
// server.js
const express = require('express');
const path = require('path');
const serveStatic = require('serve-static');

const app = express();
const router = express.Router();

const port = 80;

const { Logger } = require('./src/logging/Logger.js');
const { Request } = require('./src/requests/requests.js');

//new logger instance
var log = new Logger();

// 1. 先处理API请求，避免被静态文件或前端路由拦截
app.use(express.json())
app.post('/api/*', async (req, res) => {
    var request = new Request();
    request.callBackend(req.url, JSON.stringify(req.body), (rawResponse) => {
      const response = JSON.parse(rawResponse)
      res.status(response.status).send(response.content)
    });
});

// 2. 挂载静态文件服务，处理dist目录下的静态资源
const distPath = path.join(__dirname, '../../dist');
app.use(serveStatic(distPath));

// 3. 所有非API的GET请求，返回index.html，交由Vue Router处理
app.get('/*', (req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

// 处理500错误
app.use((err, req, res, next) => {
  log.error(err.stack);
  res.status(500).send('Something went wrong!');
});

// 启动服务器
app.listen(port, () => {
  log.info(`Vue App is served on port ${log.highlight(port)}`);
  log.info('Directory for vue app: ' + distPath);
});

关键修复点说明 #

• 路由顺序：先处理API请求，再处理静态文件，最后处理前端路由。Express按顺序匹配路由，确保API请求不会被后续中间件拦截。
• 正确的文件路径：用path.join拼接绝对路径，避免因操作系统路径分隔符差异导致的错误。
• 通配符GET路由：仅匹配GET请求，不会影响POST等其他方法的API请求，确保后端接口正常工作。

内容的提问来源于stack exchange，提问作者CØDƐX