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

【问题标题】：How to deploy React application on sub folder for local development?如何在子文件夹中部署 React 应用程序以进行本地开发？
【发布时间】：2021-03-18 21:23:08
【问题描述】：

我有 2 个想要在本地运行的 react 应用程序。

例如：

我有 1 号应用程序，它是在 localhost:3000 上运行的登录应用程序
我需要 2 号应用程序在 localhost:3001/portal 上运行

我目前的解决方案是：

在第一个应用程序中是：

BROWSER=none
HOST=localhost
PORT=3000

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

在应用程序编号 2 中，我进入 package.json 文件并添加 homepage 属性。我将我的.env 文件设置为：

BROWSER=none
HOST=localhost
PORT=3001

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

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

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

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

How should I configure create-react-app to serve app from subdirectory?

你应该像这样在你的.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 包。版本为了响应从.env 读取PUBLIC_URL 变量，我必须安装的最小版本是3.4.1。上面的原因解决方案对我不起作用，因为rescripts 版本低于3.4.1。

"react-scripts": "3.4.1",

【讨论】：