使用react-scripts构建的React App部署后JS/CSS文件404求助

我之前也碰到过一模一样的问题，这大概率是publicPath配置不正确导致的，咱们一步步来解决：

问题根源 #

你用react-scripts构建的应用，默认的publicPath是根目录/，也就是说编译后的资源会从网站根目录请求。但你的应用部署在/ads/build这个子路径下，服务器上的实际资源存在ads/build/static里，默认配置让资源请求路径和实际存储路径不匹配，才会返回404错误。

解决方案 #

方法1：修改package.json添加homepage字段（官方推荐） #

直接在项目根目录的package.json里添加一行配置：

"homepage": "/ads/build"

添加完成后重新执行npm run build。这时候生成的build文件夹里的index.html，引用JS和CSS的路径会自动变成/ads/build/static/js/...和/ads/build/static/css/...，和服务器上的资源路径完全对应。

方法2：使用环境变量PUBLIC_PATH（适合临时调整） #

如果你的react-scripts版本是2.0及以上，可以直接在build命令里动态指定资源基础路径：

# Linux/macOS环境
PUBLIC_PATH=/ads/build/ npm run build

# Windows PowerShell环境
$env:PUBLIC_PATH="/ads/build/" ; npm run build

这个方式和方法1的效果一致，不需要修改package.json，适合临时调整部署路径的场景。

最后检查服务器配置 #

还要确保生产服务器正确映射请求路径到物理文件路径。比如用Nginx的话，需要添加类似这样的配置：

location /ads/build/ {
    root /path/to/your/server/parent-dir; # 替换成服务器上ads文件夹所在的上级目录
    try_files $uri $uri/ =404;
}

这样当请求https://www.example.com/ads/build/static/css/main.41938fe2.css时，服务器会去对应物理路径找到文件，就能正常返回资源了。

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