在开发模式下使用 create-react-app 时如何将应用程序放在子文件夹中？

Question

这里有很多答案，其他地方的博客文章（包括官方文档https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths）解释了如何构建你的 React 应用程序以便它可以从子文件夹运行。

但是，当我仍处于开发模式时，我找不到如何从子文件夹运行它的方法。（即不运行：npm run build）

我想在执行 npm start 时看到在 localhost:3000/web 上运行的应用程序。不是本地主机：3000。自动注入的静态资源（如

• src="/static/js/bundle.js"

• src="/static/js/1.chunk.js"

• src="/static/js/main.chunk.js"

• src="/main.947eb2055b7df4ce1a9e.hot-update.js"

  ) 应相应调整其路径以包含应用程序的子文件夹名称“web”。

是否可以？

我应该“弹出”应用程序并自己配置吗？

我应该克隆并更改“react-scripts start”吗？

有没有更简单的方法？

谢谢

更新：

我应该提供更多细节。我确实使用反向代理“http-proxy-middleware”，这就是我需要在子文件夹中运行每个应用程序的原因。下面使用 BrowserRouter 的“basename”的建议适用于链接，但不适用于注入的静态资源，例如“/static/js/bundle.js” 当您使用“basename”、“homepage”和运行方式：npm start。

因此，当您在端口 80 上的反向代理后面运行它时，它会尝试访问不存在的 localhost/static/js/bundle.js。它应该访问 localhost/web/static/js/bundle.js。但是由于这些链接是自动注入的，我无法控制添加“web”作为前缀。

Answer 1

与您合作时BrowserRouter，只需添加basenameas即可实现此目的prop。

\n\n

从文档中，

\n\n

\n

所有位置的基本 URL。如果您的应用程序是从服务器上的子目录提供的，则您\xe2\x80\x99 需要将其设置为该子目录。格式正确的基本名称应该有一个前导斜杠，但没有尾部斜杠。

\n

\n\n

<BrowserRouter basename="/web">\n  //Your routes\n</BrowserRouter>\n

\n\n

注意：还需要在package.json文件中维护一个条目

\n\n

"homepage": "http://Domain_name/web",\n

\n