时间戳

首页 > 解决方案 > 在开发模式下使用 create-react-app 时如何将应用程序放在子文件夹中？

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

问题描述

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

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

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

可能吗？

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

我应该克隆并更改“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”作为前缀。

标签： reactjsreact-routercreate-react-app

解决方案

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

从文档中，

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

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

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

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

推荐阅读