ReactJS：在部署时替换 webpack 环境变量的策略答案

【问题标题】：ReactJS: Strategy to replace webpack environment variable at deploy timeReactJS：在部署时替换 webpack 环境变量的策略
【发布时间】：2021-07-08 06:52:04
【问题描述】：

目前在构建我们的 React 应用程序时，我们正在使用 Webpack，就像这样

new webpack.DefinePlugin({
  'process.env': {
    REACT_APP_BASE_URL: JSON.stringify(process.env.REACT_APP_BASE_URL),
    ... 20 more lines,

因此，这些参数是在构建时提供的，react 应用程序被构建为静态文件，然后由我们完全控制的 nginx 提供服务

在整个应用程序中，我们使用 process.env.REACT_APP_BASE_URL 和另外 20 个 process.env.x 变量。

以前，对于每个运行时环境，我们都需要重新构建应用程序并在构建时提供相应的参数。现在我们尝试构建一次并在部署时插入这些参数。

我的问题是，在部署时为这些变量提供对我们当前源代码的影响/更改最小的最可行方法是什么？

【问题讨论】：

标签： reactjs webpack deployment

【解决方案1】：

制作不同的 .env 文件，如 .env.production、.env.qa 并在 package.js 的脚本中使用它 enter link description here

【讨论】：

不幸的是，我不使用 create-react-app，我认为这就是他们最终依赖于在您引用的 URL 中拥有不同环境的原因:(