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值，构建包并重复此步骤多次。

我的手动步骤如下：

修改 "homepage": "myApp" > npm run build > 保存用于部署的构建文件夹
修改 "homepage": "/UAT/myApp" > npm run build > 保存用于部署的构建文件夹
修改 "homepage": "/webApps/myApp" > npm run build > 保存用于部署的构建文件夹
继续重复以上操作.....

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

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

感谢您的帮助或建议。

Answer 1

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

If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json:
   "homepage": ".",
This will make sure that all the asset paths are relative to 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.

– the documentation

Answer 2

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

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

它与哈希路由器完美配合

Answer 4

你可以这样设置 homepage :

"homepage": "/"

并构建一次项目并处理此服务器端并从 index.html

读取所有路由

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

npm build how to change package.json - homepage value by variable or script

web-deployment

node.js

reactjs

package.json

npm-build