我应该如何配置 create-react-app 以从子目录提供应用程序？

Question

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

原文由 guest 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

---

精简版

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

 <base href="%PUBLIC_URL%/">

1. Also in public/index.html , if you have custom link element, make sure theyre are prefixed with %PUBLIC_URL% (like manifest.json and favicon.ico 参考资料）。
2. 如果你使用 BrowserRouter ，你可以添加 basename 道具：

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

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

 // 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>

1. 在你的元素中使用相对链接

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

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

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

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

你应该完成了。

---

附加信息

我更喜欢在 --- 中使用 PUBLIC_URL 而不是 homepage package.json 因为我想使用 env 变量设置 drgitlab.ir 上的设置关于该主题的相关资源：

• 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_URL 重写 homepage 和 PUBLIC_URL 如果您提供域名，也使用域名。如果仅设置 homepage ， PUBLIC_URL 将设置为 homepage 的值。

---

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

---

Sass 不会用不正确的相对路径编译。它也不会用你的 ../public/assets 文件夹的正确相对路径编译，因为 ModuleScopePlugin 限制，你可以通过将图像移动到 src 文件夹中来避免限制，我没有试过了。

---

似乎无法在开发模式（npm start）中测试相对路径。 见评论

---

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

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

原文由 Ambroise Rabier 发布，翻译遵循 CC BY-SA 4.0 许可协议