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

Question

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

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

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

everytime when I build the package, for different sub-folders, I need to modify the homepage value in package.json , build the package and repeat this steps mulltiple times.

我的手动步骤如下：

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",
  }
  ...
}

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

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

您只需将homepage设置为. 如果您使用的是 CRA 9.0 或更新版本：

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

 "homepage": ".",

这将确保所有资产路径都相对于 index.html。 You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.

– 文档

Answer 3

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

它与 Hash 路由器完美配合

Answer 4

你可以这样设置homepage ：

"homepage": "/"

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