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

Question

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

Answer 1

除了您的要求之外，我还要添加我的要求：

• 它应该由 CD 通过环境变量完成。
• 如果我需要重命名子目录，我应该只需要更改 env 变量。
• 它应该与反应路由器一起使用。
• 它应该适用于 scss (sass) 和 html。
• 一切都应该在开发模式（npm start）下正常工作。

不久前，我还不得不在 Angular2+ 项目中实现它，我发现在 React 中实现它比在 Angular2+ 中更难实现，在那里你可以很好地使用ng build --base-href /<project_name>/. 来源

精简版

1. 在构建之前，将PUBLIC_URLenv 变量设置为子目录的值，/subdir例如使用。您也可以将此变量放入您的.env.production（如果您没有该文件，您可以查看文档）
2. 在public/index.html加入碱元素波纹管，这是对于像图像静态文件。

<base href="%PUBLIC_URL%/">

3. 同样在 中public/index.html，如果您有自定义link元素，请确保它们以%PUBLIC_URL%(likemanifest.json和favicon.icohref)为前缀。
4. 如果使用BrowserRouter，则可以添加basename道具：

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

5. 如果您使用Router，因为您需要访问history.push方法，以编程方式更改页面，请执行以下操作：

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

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

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

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

6. 在元素中使用相对链接

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

7. 将您的background-image链接从 scss移动到 jsx/tsx 文件（请注意，如果您使用 css 文件，则可能不需要这样做）：

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

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

你应该完成。

附加信息

我更喜欢使用PUBLIC_URL而不是homepageinpackage.json因为我想使用在 gitlab 上设置的 env 变量来设置子目录。关于该主题的相关资源：

• https://create-react-app.dev/docs/deployment/#building-for-relative-paths
• https://create-react-app.dev/docs/advanced-configuration/
• https://github.com/facebook/create-react-app/issues/998

PUBLIC_URLoverride homepage，PUBLIC_URL如果您提供域名，还可以使用域名。如果只设置homepage，PUBLIC_URL将设置为 的值homepage。

如果您不想在 index.html 中使用基本元素（我不知道为什么），您将需要自己附加process.env.PUBLIC_URL到每个链接。请注意，如果您有带有基本元素的 react-router，但尚未设置basenameprop，您将收到警告。

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

似乎没有办法在开发模式下测试相对路径（npm start）。见评论

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

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

Answer 2

要获取相对 URL，您可以像这样构建应用程序：

PUBLIC_URL="." npm run build

Answer 3

您应该package.json为此添加条目。

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

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

"homepage": "./"

从这里

Answer 4

对于create-react-app v2和react-router v4，我使用以下组合在“ / app”下为生产（登台，uat等）应用服务：

package.json：

"homepage": "/app"

然后在应用程序入口点：

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

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

Answer 5

也许您可以使用react-router及其相对 basename参数，该参数允许您从子目录为您的应用程序提供服务。

\n

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

\n

例如：

\n

<BrowserRouter basename="/calendar"/>\n

\n

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

\n

请参阅：https ://reacttraining.com/react-router/web/api/BrowserRouter/basename-string

\n