我应该如何配置create-react-app来从子目录中提供app？

Question

我在服务器上呈现经典的Web应用程序。我想在React中创建管理面板作为单页面应用程序。我想从https://smyapp.example.com/admin/服务器管理员面板。我尝试使用create-react-app，但它假设我从根URL提供SPA。我应该如何配置create-react-app来从"admin"子目录中提供应用程序？在文档中我找到了"homepage"属性，但如果我正确理解它需要完整的URL。我无法提供完整的URL，因为我的应用程序部署在少数环境中。

Answer 1

您应该在package.json中添加条目。

在你的package.json中添加一个键“homepage”：“your-subfolder /”所有静态文件将从“你的子文件夹”加载

如果没有子文件夹并且您需要从同一文件夹加载，则需要将路径添加为“./”

"homepage": "./"

来自here

Answer 2

对于create-react-app v2和react-router v4，我使用以下组合为“/ app”下的生产（staging，uat等）应用程序提供服务：

的package.json：

"homepage": "/app"

然后在app入口点：

 <BrowserRouter basename={process.env.PUBLIC_URL}>
  {/* other components */}
 </BrowserRouter>

在本地开发和部署环境中，一切都“正常”。 HTH！

Answer 3

也许你可以使用react-router及其相对的basename参数，它允许你从一个子目录提供你的应用程序。

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

例如 ：

<BrowserRouter basename="/calendar"/>

所以<Link to="/today"/>将渲染<a href="/calendar/today">

见：https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

祝你今天愉快！

Answer 4

把package.json放在这样的东西：

“主页”：“http://localhost:3000/subfolder”，

并在任何公共或本地服务器上正常工作。当然，子文件夹必须是您的文件夹。

Answer 5

您可以在webpack配置中指定公共路径以及使用react route basepath。

链接到公共路径：https://webpack.js.org/guides/public-path/

请注意，公共路径将是前导和尾随斜杠/有效。