如何在子文件夹中部署 React 应用程序以进行本地开发？

Question

我有 2 个试图在本地运行的反应应用程序。

例如：

1. 我有 1 号应用程序，它是在 localhost:3000 上运行的登录应用程序
2. 我需要 2 号应用程序才能在 localhost:3001/portal <= 这是一个非常简单的应用程序，它甚至没有内置路由器。

我目前的解决方案是：

• 在第一个应用程序中是：

BROWSER=none
HOST=localhost
PORT=3000

package.json文件中没有homepage属性。

• 在申请号 2 I go 到package.json文件并添加homepage属性。 我将我的.env文件设置为：

BROWSER=none
HOST=localhost
PORT=3001

目前，应用程序确实在https://localhost:3001/portal上进行本地部署以进行开发。 但是，当我导航到它时，我看到的只是一个空白页。 我觉得我错过了一些东西，应用程序不知道从哪里提供文件。

在子目录上运行 2 个应用程序的设置应该是什么？

Answer 1

经过更长时间的研究，我发现了一个线程，其中非常详细地解释了如何实现这一点。

我应该如何配置 create-react-app 以从子目录提供应用程序？

你应该在你的.env文件中设置一个环境变量，如下所示：

HOST=localhost
PUBLIC_URL=/your-subfolder-name
PORT=3000 <== (this is optional, if you want your application to run on port. In my case I was running multiplle applications there for each application had different port).

设置好变量并且您使用任何类型的路由器后，您将需要根据该相对路径计算您的路由。 要获取默认路径，您可以这样做：

process.env.PUBLIC_URL; <== (This will return your variable value that you set up in .env file).

因为我使用的是脚本rescripts ，所以我不得不更改react-scripts package。 版本 为了响应从.env读取PUBLIC_URL变量，我必须安装的最低版本是3.4.1 。 上面的原因解决方案对我不起作用，因为rescripts版本低于3.4.1 。

"react-scripts": "3.4.1",