Express无法路由静态React构建文件：缺失URL slug问题求助

要解决静态资源路径缺失/my-app前缀的问题，需要同时调整React打包配置和Express路由设置，两步即可解决：

1. 给React设置Base URL（让打包资源自动带前缀） #

在你的React项目的package.json中添加一行配置，指定项目的部署根路径：

{
  "name": "your-react-app",
  "homepage": "/my-app",
  // 其他原有配置...
}

之后重新执行npm run build，打包生成的build/index.html里，所有静态资源的引用路径会自动加上/my-app前缀（比如原来的<script src="/js/main.hash.js">会变成<script src="/my-app/js/main.hash.js">）。

如果不想修改package.json，也可以用环境变量临时指定：

PUBLIC_URL=/my-app npm run build

2. 调整Express的路由挂载路径 #

修改Express代码，把静态服务和客户端路由都挂载到/my-app路径下：

const path = require("path");
const express = require("express");
const app = express();
const port = 80;
const host = "::";

let root = path.join(__dirname, "build");

// 将静态服务挂载到/my-app路径下，匹配带前缀的资源请求
app.use('/my-app', express.static(root));

// 仅处理/my-app开头的所有路径，返回React的index.html以支持客户端路由
app.get("/my-app/*", (req, res) => {
  res.sendFile(path.join(root, "index.html"));
});

app.listen(port, host, () => {
  console.log(`Serving from root=${root}`);
  console.log(`Example app listening on host ${host} & port ${port}`);
});

逻辑说明 #

• React端的配置确保页面引用的静态资源路径与Ingress的访问路径一致；
• Express端的调整让它只响应/my-app开头的请求，不管是静态资源还是客户端路由，都能正确匹配到对应文件，避免404错误。

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