我应该如何配置CreateReact应用程序以从子目录服务应用程序？

Question

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

Answer 1

您应该在包中添加条目。json用于此。

在包中添加一个键“主页”：“您的子文件夹/”。json将从“您的子文件夹”加载所有静态文件

如果没有子文件夹，并且需要从同一文件夹加载，则需要将路径添加为“/”或删除包含“homepage”：“xxxxxxxxx”

“主页”：“/”

从官方文件

默认情况下，如果应用托管在服务器根目录下，CreateReact App会生成一个生成。要重写此选项，请在package.json中指定主页，例如：

“主页”：http://mywebsite.com/relativepath",

注意：如果您使用的是react router@^4，则可以路由

从这里开始，并查看CRA官方文件

Answer 2

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

包裹json:

"homepage": "/app"

然后在应用程序入口点：

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

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

Answer 3

除了您的要求之外，我还要补充我的要求：

• 它应该通过光盘完成，通过一个环境变量。
• 如果我需要重命名子目录，我应该只需要改变env变量。
• 它应该与反应路由器一起工作。
• 它应该与scss（sass）和html一起工作。
• 在开发模式（npm启动）下，一切都应该正常工作。

不久前，我还必须在Angular2项目中实现它，我发现在React中实现它比在Angular2中实现更困难，在Angular2中，您可以使用ng build--base href/

1. 在构建之前，将PUBLIC\u URLenv变量设置为子目录的值，例如使用/subdir。您还可以将此变量放入。环境。生产（如果您没有该文件，您可以检查文档）
2. 在public/index中。html添加下面的基本元素，这是用于静态文件（如图像）

<base href="%PUBLIC_URL%/">

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

// history.tsx
import {createBrowserHistory} from 'history';

export default createBrowserHistory({ basename: process.env.PUBLIC_URL });

<!-- Where your router is, for me, App.tsx -->
<Router history={history}>
  ...
</Router>

<!-- "./assets/quotes.png" is also ok, but "/assets/quotes.png" is not -->
<img src="assets/quotes.png" alt="" />

/*remove that*/
background-image: url('/assets/background-form.jpg');

<section style={{backgroundImage: `url('assets/background-form.jpg')`}}>
...

你应该完蛋了。

我更喜欢使用公共URL而不是包中的主页。json，因为我想使用gitlab上的env变量set来设置subdir。关于该主题的相关资源：

• https://create-react-app.dev/docs/deployment/#building-对于相对路径

PUBLIC\u URL覆盖homepage，PUBLIC\u URL如果您提供域名，也会使用域名。如果仅设置主页，公共URL将设置为主页的值。

如果不想在索引中使用基元素。html（我不知道为什么），您将需要附加进程。环境。公开URL到您自己的每个链接。请注意，如果您使用基本元素创建react router，但未设置basenameprop，则会收到警告。

Sass不会使用错误的相对路径进行编译。它也不会使用到的正确相对路径进行编译/public/assets文件夹，由于ModuleScopePlugin限制，您可以通过在src文件夹中移动图像来避免限制，我还没有尝试过。

似乎没有办法在开发模式（npm start）中测试相对路径

最后，这些stackoverflow链接都有相关的问题：

• 我可以在react路由器中设置基本路由吗
• 使用环境变量设置base href