问题描述
我使用 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值，构建包并重复此步骤多次。
我的手动步骤如下：
- 修改
"homepage": "myApp">npm run build> 保存构建文件夹以进行部署 - 修改
"homepage": "/UAT/myApp">npm run build> 保存构建文件夹以进行部署 - 修改
"homepage": "/webApps/myApp">npm run build> 保存构建文件夹以进行部署 - 不断重复以上动作......
我该如何改善这种情况？我怎样才能构建一次以适应所有不同的路径？
例如，我可以在 homepage 值中使用变量并将其设置在环境变量中吗？
或者，我可以写一个脚本来做一些事情吗？我希望简化这个编译步骤，最好是执行一次构建或构建脚本。
感谢您的任何帮助或建议。
解决方法
您可以在构建时使用 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
如果您使用的是 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，而无需重新构建它。
,您可以简单地构建一次，然后使用 vim 或任何文本编辑器对 index.html 执行以下操作：将 ="/ 替换为 ="/myApp/ 和 {{1 }} 和 ="/UAT/myApp/ 分别位于三个文件夹中。
您也可以使用 =/webApps/myApp/ 实用程序来执行此操作。或者甚至可以使用 sed 脚本自动执行。
它与哈希路由器完美配合
,你可以这样设置homepage：
"homepage": "/"
并构建一次项目并处理此服务器端并从 index.html