1

我使用创建了我的应用程序create-react-app，并使用它npm run build来构建生产包。

我需要将应用程序放在不同客户的网站上，每个客户都将应用程序放在不同的子文件夹中。

例如
客户端A：https://clientA.com/myApp
客户端B：https://clientB.com/UAT/myApp
客户端C：https://clientC.com/webApps/myApp

每次构建包时，对于不同的子文件夹，我都需要修改 中的homepage值package.json，构建包并多次重复此步骤。

我的手动步骤如下：

  1. 修改"homepage": "myApp">>npm run build保存构建文件夹进行部署
  2. 修改"homepage": "/UAT/myApp">>npm run build保存构建文件夹进行部署
  3. 修改"homepage": "/webApps/myApp">>npm run build保存构建文件夹进行部署
  4. 不断重复上述操作......

我该如何改善这种情况？我怎样才能构建一次以适应所有不同的路径？
例如，我可以在homepage值中使用变量并将其设置在环境变量中吗？

或者，我可以写一个脚本来做一些事情吗？我希望简化这个编译步骤，最好是执行一次构建或构建脚本。

感谢您的任何帮助或建议。

4

4 回答 4

3

PUBLIC_URL构建时可以使用环境变量。构建命令如下所示：

PUBLIC_URL=https://clientA.com/myApp npm run build

您可以创建 npm 脚本来简化它，例如：

{
  ...
  "scripts": {
    "build-clientA": "PUBLIC_URL=https://clientA.com/myApp react-scripts build",
    "build-clientB": "PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build",
  }
  ...
}

如果您想为所有客户端执行一个命令，构建和移动build文件夹的简单 bash 脚本应该可以正常工作，它看起来像：

PUBLIC_URL=https://clientA.com/myApp react-scripts build && mv build clientA
PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build && mv build clientB
于 2021-05-06T09:08:42.590 回答
2

如果您使用的是 CRA 9.0 或更高版本，则可以设置homepage为：.

如果您不使用 HTML5 pushState 历史 API 或根本不使用客户端路由，则无需指定将提供应用程序的 URL。相反，你可以把它放在你的 package.json 中：

   "homepage": ".",

这将确保所有资产路径都相对于 index.html。然后，您将能够将您的应用程序从http://mywebsite.com移动到http://mywebsite.com/relativepath甚至http://mywebsite.com/relative/path，而无需重新构建它。

–文档

于 2021-04-29T10:31:09.573 回答
1

您可以简单地构建一次，然后使用或任何文本编辑器对三个文件夹分别vim进行以下操作index.html： 分别替换="/为="/myApp/和。您也可以使用该实用程序来执行此操作。或者甚至可以使用脚本将其自动化。="/UAT/myApp/=/webApps/myApp/sedbash

它与哈希路由器完美配合

于 2021-05-06T16:15:44.643 回答
0

你可以homepage这样设置：

"homepage": "/"

并构建项目一次并处理此服务器端并读取所有路由index.html

于 2021-05-09T14:26:41.067 回答