为什么我的Express应用无法在指定URL路径下托管React构建产物

你遇到的报错本质和express.static本身逻辑无关，是React打包配置和Express路由范围匹配错误共同导致的：

• 第一阶段404报错：React默认打包生成的index.html里所有静态资源路径都是绝对根路径，比如<script src="/static/js/main.xxx.js"></script>。当你访问/react路径加载页面时，浏览器会把这类路径解析为http://localhost:3000/static/js/main.xxx.js，而不是带前缀的http://localhost:3000/react/static/js/main.xxx.js，该请求没有匹配到你挂载在/react下的静态资源中间件，自然找不到文件返回404。
• 第二阶段语法报错：你添加的全局*通配符路由会捕获所有未匹配到静态资源的请求，全部返回index.html的HTML内容。浏览器请求JS、CSS、manifest资源时拿到的是开头为<的HTML文本，把它当做脚本/样式解析就会抛出Unexpected token '<'的语法错误。

你疑惑的多静态目录匹配逻辑如下：

• 多个express.static中间件按照代码书写顺序从上到下匹配，只要请求路径前缀匹配到某条app.use指定的路径，就会进入该中间件，在对应静态目录下查找去掉前缀后的路径对应的文件。
• 找到匹配文件就直接返回，找不到就进入下一个中间件/路由，不会终止匹配流程。
• 未匹配到任何express.static前缀的请求，会直接跳过所有静态资源中间件，进入后续路由逻辑。

需要同时修改React打包配置和Express路由配置：

步骤1：修改React打包配置，适配子路径部署 #

二选一即可：

• 打开React项目的package.json，新增字段"homepage": "/react"，重新打包后所有静态资源路径会自动带上/react前缀。
• 如果是自定义webpack配置的项目，修改webpack配置中output.publicPath = '/react/'即可。

步骤2：修改Express路由配置 #

调整通配符路由的匹配范围，避免捕获非/react路径的请求，完整配置示例：

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

// 挂载React静态资源到/react路径
app.use("/react", express.static(path.join(__dirname, "client", "build")));

// 仅捕获/react开头的所有路径，处理React前端路由刷新问题
app.get('/react/*', (req, res) => {
  res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});

// 其他业务接口、静态资源托管规则正常写即可，不会被上面的路由干扰
app.listen(3000);

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