Webpack开发服务器中是否可以使用相对路径 - React JS

Question

当我使用`npm run start`在`localhost:3000`上运行开发服务器时，服务器按预期工作。我正在使用react-scripts，我没有弹出react应用程序。

我的目标是将开发服务器设置在反向代理后面，使`localhost:5572/author/name/`指向在`localhost:3000`上运行的开发服务器。

安装已经正常工作，`index.html`被加载。但是由于开发服务器正在`"/"`上运行，因此页面尝试将脚本加载为`""`，它期望URL为`localhost:5572/static/js/bundle.js`，但是反向代理正在`localhost:5572/author/name/static/js/bundle.js`上提供相同的文件。

在`package.json`中，我已经指定了：

{
    ...
    "homepage": "./",
    ...
}

我的生产构建具有相对路径，但开发构建没有。

是否有一种方法可以使用相对路径而不是绝对路径？或者我可以使用其他解决方案。

谢谢。

- Chaitanya Bankanhal

Answer 1

在你的项目根目录下创建一个名为 .env.development 的文件，并在该文件中添加下面的字符串。

PUBLIC_URL=/author/name

该设置仅影响dev模式。有关如何定义环境变量的更多详细信息，请访问此处。而这里提供了有关使用公共文件夹的一些信息。

- Ken Bekov