Vue History模式搭配Express服务器刷新出现404问题求助

嘿，我碰到过好多次这个问题啦——Vue的History模式刷新出现404，大多是中间件顺序没搞对，或者配置细节漏了。你用了connect-history-api-fallback但没解决，大概率是挂载顺序错了，我给你一步步捋清楚：

1. 核心问题：中间件执行顺序搞反了 #

Express的中间件是按挂载顺序执行的，如果你先挂载了静态文件服务，那当用户刷新某个路由（比如/about），Express会先去dist目录找/about这个文件，找不到就直接返回404了，根本没走到history中间件那一步。

正确的顺序应该是：先让history中间件捕获所有路由请求，把非静态资源的请求重定向到index.html，再由静态文件服务返回这个入口文件。

2. 完整的正确配置示例 #

把你的server.js改成下面这样：

var express = require('express');
var history = require('connect-history-api-fallback');
var path = require('path');
var serveStatic = require('serve-static');

// 注意这里要声明const app，避免全局变量污染
const app = express();

// 第一步：先挂载history API fallback中间件
app.use(history({
  // 如果你部署在子路径下（比如https://yourdomain.com/app/），需要添加rewrites配置
  // rewrites: [
  //   { from: /^\/app\/.*$/, to: '/app/index.html' }
  // ]
}));

// 第二步：再挂载静态文件服务，指向dist目录
app.use(serveStatic(path.join(__dirname, '/dist')));

// 设置端口并启动服务
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

3. 额外注意：部署在子路径的情况 #

如果你的Vue项目不是部署在域名根目录，而是子路径（比如/app/），还需要做两步：

• 在Vue项目的vue.config.js里设置publicPath：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}

• 同时在history中间件里开启rewrites配置（就是上面代码里注释的部分），确保路由请求能正确重定向到子路径下的index.html。

4. 验证步骤 #

1. 重新打包Vue项目：运行npm run build，确保dist目录是最新的；
2. 重启Express服务器；
3. 刷新页面测试，看看404问题是否解决。

内容的提问来源于stack exchange，提问作者Carlos Guerrero