VueJS 3项目部署后除根路径外所有路由均返回Cannot GET错误

• 核心是开启vue-router history模式后，express静态服务未配置前端路由 fallback 规则：直接访问非根路由时，请求会直接发送到服务端，当前服务端仅托管了dist目录下的静态资源，没有匹配所有请求返回入口index.html的逻辑，因此返回404 Cannot GET报错。
• 你当前的问题和webpack配置无关，不需要修改打包相关配置，仅需调整server.js即可。

直接修改server.js代码，添加所有未匹配静态资源的请求统一返回index.html的逻辑，修改后完整代码如下：

const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;

app.use(serveStatic(path.join(__dirname, 'dist')));
// 新增：所有未匹配到静态资源的请求，返回入口index.html，交给前端路由处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(port);

如果修改后仍存在问题，可按以下顺序排查：

• 确认vue-router中已正确开启history模式，若项目部署在域名子路径下，需要给createWebHistory传入对应base参数
• 确认打包后的dist目录下存在index.html文件，路径配置无错误
• 如果是动态路由参数存在特殊字符，确认路由规则配置和参数传递逻辑符合vue-router要求

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