react-scripts构建后用serve部署，main.js返回index.html的问题求助

我之前也踩过这个一模一样的坑！你遇到的问题本质是服务器把JS文件的请求错误返回成了index.html，浏览器把HTML代码当成JS解析，自然就会报Unexpected token <（毕竟HTML的开头就是<）。下面是几个排查和解决的步骤：

1. 检查package.json里的homepage配置 #

这是最常见的原因！如果你的应用部署在根路径（比如localhost:5000/），但你之前给homepage设置了子路径（比如"/my-app"），或者没设置导致默认用绝对路径，就会让浏览器请求错误的资源地址，服务器找不到资源就会返回index.html。

解决办法：

• 在package.json里添加或修改homepage字段为"."：

  "homepage": "."
  

• 然后重新执行npm run build，再用serve -s build启动服务，访问试试。

2. 检查React Router的basename（如果用了前端路由） #

如果你项目里用了React Router的BrowserRouter，要确保basename和你的部署路径一致。比如部署在根路径的话，不需要额外设置；如果是子路径才需要对应配置：

<BrowserRouter basename="/">
  {/* 你的路由组件 */}
</BrowserRouter>

如果basename设置错误，也会导致路由跳转时资源请求路径出错，触发同样的问题。

3. 手动验证build文件夹里的资源路径 #

打开build/index.html，查看里面的JS、CSS引用路径是不是相对路径（比如./static/js/main.975cb3de.js），而不是绝对路径（比如/static/js/main.975cb3de.js）。

• 如果是绝对路径，说明homepage配置不对，回到第一步调整后重新build；
• 如果是相对路径，那可以再检查下serve的启动命令有没有问题，确保是serve -s build（-s参数是让serve把所有未匹配的请求重定向到index.html，支持SPA路由，但前提是资源路径正确）。

4. 临时排查：去掉-s参数测试 #

可以先试试用serve build（不带-s）启动服务，然后访问localhost:5000：

• 如果这时候页面能正常加载（只是前端路由失效），说明确实是-s的重定向逻辑和资源路径冲突了，回到前面的步骤修正资源路径即可；
• 如果还是报错，那可能是build过程中出了问题，可以尝试删除build文件夹，重新执行npm run build。

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