Create React App生产环境JS/CSS资源加载失败求助

这是CRA部署到非根路径时的典型问题，别慌，按下面几步就能搞定：

1. 配置package.json里的homepage字段 #

首先打开项目根目录的package.json，添加homepage字段，值要和你的生产环境子路径完全匹配：

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

这个配置会告诉CRA在打包时，给所有静态资源（JS、CSS、图片等）加上/tools/forecaster的路径前缀，这样生产环境下浏览器就能正确找到这些资源了。

2. 给路由添加basename属性 #

你用的是react-router-dom的BrowserRouter，需要给它加上basename属性，对应你的子路径：

// routes.js
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import login from './components/login';

const myTool = () => {
  // 你的组件逻辑
};

function AppRoutes() {
  return (
    <Router basename="/tools/forecaster"> {/* 新增basename配置 */}
      <Route path="/login" component={login} />
      <Route path="/" component={myTool} />
      // 其他路由规则...
    </Router>
  );
}

export default AppRoutes;

这个设置能确保所有路由跳转都基于/tools/forecaster前缀，避免路由跳转后出现404。

3. 重新打包并部署 #

修改完配置后，重新执行打包命令：

npm run build

把生成的build目录下的所有文件，部署到生产环境对应位置即可。

问题根源解释 #

本地开发时，虽然URL是http://localhost:8081/tools/forecaster，但CRA的开发服务器默认把资源放在根路径下，能自动适配子路径访问；但生产环境中你的应用部署在stg.abc.com的/tools/forecaster子目录里，如果不配置homepage，打包后的资源路径会是/static/js/main.xxx.js，浏览器会去https://stg.abc.com/static/js/...找资源，自然就找不到了。

内容的提问来源于stack exchange，提问作者Atul kumar singh