reactjs - 在开发模式下使用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。自动注入(inject)的静态资源(如

• 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”适用于链接，但不适用于注入(inject)的静态资源，例如“/static/js/bundle.js”。当您使用“basename”、“homepage”和运行方式:npm start。

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

Answer 1

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

来自docs ,

The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

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

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

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