旧JSP应用集成React时，懒加载资源请求路径异常问题

这个问题的核心是Webpack的publicPath配置：当你把React代码嵌入到localhost:8100的JSP页面中时，react-scripts默认使用相对路径作为publicPath，导致懒加载的代码块会从当前页面的域名（localhost:8100）请求，而不是你的React开发服务器（localhost:3000）。

下面是几种简单有效的解决方法：

方法1：通过启动脚本设置PUBLIC_PATH环境变量 #

react-scripts支持通过PUBLIC_PATH环境变量来指定Webpack的publicPath。你可以直接修改package.json里的start命令：

跨平台方案（推荐） #

先安装cross-env来兼容Windows和Unix系统：

npm install cross-env --save-dev

然后修改start脚本：

"scripts": {
  "start": "cross-env PUBLIC_PATH=http://localhost:3000/ react-scripts start"
}

仅Unix/Linux/macOS #

直接在命令前加环境变量：

"scripts": {
  "start": "PUBLIC_PATH=http://localhost:3000/ react-scripts start"
}

仅Windows #

使用set命令：

"scripts": {
  "start": "set PUBLIC_PATH=http://localhost:3000/ && react-scripts start"
}

方法2：使用.env配置文件 #

在你的React项目根目录下创建.env.development文件（只在开发环境生效），添加以下内容：

PUBLIC_PATH=http://localhost:3000/

react-scripts会自动加载这个文件中的环境变量，无需修改启动脚本。

验证效果 #

重启React开发服务器后，打开localhost:8100的JSP页面，打开浏览器控制台的Network标签，触发懒加载操作。你会看到代码块的请求地址变成了http://localhost:3000/static/js/[chunk-name].chunk.js，问题就解决了。

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