在 React 中，如何在 package.json 中使用“主页”属性时部署到多个环境？

Posted 2023-03-07

【中文标题】在 React 中，如何在 package.json 中使用“主页”属性时部署到多个环境？

【英文标题】：In React, how do I deploy to multiple environments while using “homepage” property in package.json?

【发布时间】：2020-03-10 17:48:25

【问题描述】：

如果取决于我部署到的位置，如何在package.json 中设置homepage 属性？对于我的测试环境，URL 将是（例如）testing.example.com/my-app/home。但在生产中，URL 将是example.com/my-app/home。那么首页属性package.json应该放什么呢？

【参考方案1】：

主页属性只是可能对遇到您的包裹的人有用的信息。它应该只是每个人都可以转到的生产 URL。我不会公开 CI 或测试 url。

项目主页的 url。

https://docs.npmjs.com/files/package.json#homepage

对于 CRA，这听起来像是在尝试推断基本名称，因此如果您的基本名称在不同的环境中有所不同，您应该将基本名称设置为环境变量，或者由环境驱动的某种配置，它设置基本名称为路由用途：

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

CRA 建议在您的 .env 文件中使用 https://www.npmjs.com/package/env-cmd 并设置 REACT_APP_API_URL

他们还建议将主页设置为. 这里https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths

【讨论】：

感谢您的链接。这解决了我的路由问题，但现在我的应用程序找不到资产文件。现在它正在尝试在example.com./static/css/2.22a7d4ef.chunk.css 中查找css 和js 文件。注意额外的点。当我取出点时，它回退得太远了，因为我的文件位于example.com/path/to/my/website/static/css/2.22a7d4ef.chunk.css，但它在example.com/static/css/2.22a7d4ef.chunk.css 中查找。它跳过了中间的路径部分。