CRA创建的React TS应用Express部署时嵌套路由无法加载chunk文件

• 核心问题是生产构建生成的静态资源引用使用了相对路径./static/xxx，当访问/todos这类嵌套路由时，浏览器会将相对路径的基准定位为当前路由层级，最终请求的资源地址变成/todos/static/js/main.xxx.chunk.js，这个地址不存在于build目录下，因此不会被express.static中间件匹配，最终命中/*通配路由返回了index.html内容。
• 根路径访问正常是因为此时相对路径的基准为站点根目录，请求的/static/xxx路径可以被express.static正确匹配。

1. 修正资源公共路径配置 #

在项目根目录的package.json文件中添加homepage字段，值设置为站点根路径：

{
  "name": "你的项目名",
  "homepage": "/",
  // 其余原有配置保持不变
}

添加后重新执行构建命令npm run build，此时生成的index.html内的资源引用路径会自动改为绝对路径/static/xxx，不受浏览器当前路由层级影响。

2. 确认路由配置顺序 #

确保express.static中间件的注册顺序始终在/*通配路由之前，你当前的配置顺序是正确的无需调整，后续修改代码时不要调换二者顺序，否则所有请求都会直接返回index.html。

3. 验证修复效果 #

重新启动server.js服务，直接访问嵌套路由/todos，查看网络请求中的静态资源地址是否为根路径开头的绝对地址，此时资源即可正常加载。

内容的提问来源于stack exchange，提问作者i.brod