npm build 如何通过变量或脚本更改 package.json - 主页值

Question

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

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

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

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

我的手动步骤如下：

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

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

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

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

Answer 1

您可以在构建时使用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

Answer 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，而无需重新构建它。

——the documentation

Answer 3

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

它与哈希路由器完美配合

Answer 4

你可以这样设置homepage：

"homepage": "/"

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