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

Posted 2023-02-22

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

【英文标题】：How to put the app in a subfolder when using create-react-app in Development mode?

【发布时间】：2019-12-01 12:48:36

【问题描述】：

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

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

我想在执行时看到应用程序在 localhost:3000/web 上运行：npm start。不是本地主机：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”作为前缀。

【问题讨论】：

你在使用BrowserRouter吗？

@ravibagul91 是的。

您始终可以使用反向代理或 nginx。为这么简单的事情弹出感觉很糟糕:) npmjs.com/package/hiproxy 这个配置应该很容易。您可以将其添加到您的启动脚本中

@DoğancanArabacı 感谢您的回复！我实际上确实使用反向代理。 （见更新的问题）。这就是它中断的地方，因为 /static/js/bundle.js 中的前导“/”迫使它离开主机而不是“web”子文件夹。如果您添加主页并执行 npm build 它将起作用。但如果你只是 npm start 就不行。

是的，我在差异端口上运行它。假设我有 2 个应用程序。 1. Angular 在端口 8000 上，一个 React 在端口 3000 上。我在端口 80 上有反向代理。上下文 /web 匹配到 3000，上下文 /web2 匹配到 8000。重写 URL 以从 url 路径中删除上下文。角的作品。但是 react 不需要，因为它的索引页面需要调用 /web/static/js/bundle.js 或 static/js/bundle.js 而是在执行 /static/js/bundle.js

【参考方案1】：

使用BrowserRouter 时，您只需将basename 添加为prop 即可实现此目的。

来自docs，

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

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

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

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

【讨论】：

感谢朋友的回复。正如我在问题中所写的那样，我阅读了有关如何将 build 放入子文件夹的信息。我厌倦了它，它起作用了。但这不是我想要的。我希望它可以在没有“npm run build”的情况下使用“npm start”在开发模式下工作。我的理解“主页”仅与“构建”相关。 BrowserRouter 对 /static/js/bundle.js 等没有帮助。

我刚刚为build 添加了注释（以防您忘记这样做），在开发模式下执行此操作也将在localhost:3000/web 上运行您的应用程序。试一试。

你是对的，它有点工作。链接使用“web”前缀，但静态资源仍然从 /static 加载，而不是从 web/static 加载。当您在反向代理后面运行应用程序时，这会破坏事情。很抱歉没有在前面提到这一点。我已经更新了问题。

目前不支持：github.com/facebook/create-react-app/issues/…。我需要做同样的事情，但目前似乎不可能。

@eox.dev, 抱歉，我们只是在开发模式下不支持相对 url！有一个 wip PR 添加支持，但是变化出奇的复杂。，这意味着你应该使用absolute URL's only。还有一件事，在 package.json 文件中，如果你有 "homepage: "http://localhost/client"，它也不会工作，因为它只是用于生产构建。