Vue路由页面刷新404问题求助（history模式+Express服务）

这个问题我太熟了！你遇到的情况是因为Vue Router用了history模式，但你的Express服务器没有正确处理前端路由的请求，导致刷新时服务器找不到对应的页面返回404。

问题原因拆解 #

当你用Vue Router的history模式时，平时点击<router-link>跳转是客户端路由跳转，浏览器不会向服务器发请求，直接由Vue Router在前端处理。但一旦你刷新页面（比如直接访问/foo），浏览器会直接向服务器发送GET /foo的请求，而你的Express服务器只配置了根路径/的响应，服务器找不到/foo对应的资源，就返回“无法获取页面”的错误了。

解决方案：修改Express服务器配置 #

你需要让Express服务器对所有路由请求都返回index.html，这样Vue加载后就能由Vue Router接管前端路由，匹配对应的组件。不过要注意先处理静态资源（比如CSS、JS、图片这些），不然静态资源也会被重定向到index.html。

修改后的Express代码如下：

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

// 先托管静态资源（如果你的项目有打包后的静态文件，比如Vue CLI打包后的dist目录）
app.use(express.static(__dirname + '/dist'));

// 所有非静态资源的请求，都返回index.html
app.get('*', (req, res) => {
  res.sendFile('index.html', { root: __dirname });
});

// 启动服务器，端口按需调整
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

额外注意事项 #

• 如果你的项目是用Vue CLI构建的，打包后要把dist目录里的文件放到Express服务器可访问的路径下，同时确保index.html里的资源引用路径正确（可以在Vue CLI的vue.config.js里配置publicPath: '/'）。
• 如果你还有其他API接口路由，要把这些接口路由放在app.get('*')之前，避免API请求也被重定向到index.html。

举个带API接口的例子：

// 先定义API路由
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from API' });
});

// 再处理前端路由的重定向
app.get('*', (req, res) => {
  res.sendFile('index.html', { root: __dirname });
});

这样调整后，不管你刷新/foo还是/bar，服务器都会返回index.html，Vue加载后Router会自动匹配对应的组件，页面就能正常显示啦！

内容的提问来源于stack exchange，提问作者shamon shamsudeen