node.js - 创建 react 应用程序无法在构建后读取环境变量

Question

我有一个 React 应用程序，使用 create-react-app 创建，然后我使用命令构建应用程序:npm run build

它使用 serve 在构建后运行应用程序，如果我们通过运行 ENV=production npm run start 使用开发代码启动应用程序，它可以读取 process.env.ENV 变量因为我将这个插件添加到 webpack 开发配置

   new webpack.DefinePlugin({
      'process.env':{
        'ENV': JSON.stringify(process.env.ENV),
      }
    }),

我也将上面的脚本添加到 webpack prod config，但是如果我在构建 ENV=prod serve -s build 之后尝试这个命令，它无法读取环境变量

如何解决这个问题？

Answer 1

如果您在app.config.js 中设置了所有环境变量，您可以在main 中构建后 替换它们。???? ????.chunk.js 文件。

示例 app.config.js 可能如下所示:

export default {
  SOME_URL: "https://${ENV_VAR_1}"
  SOME_CONFIGURATION: "${ENV_VAR_2}",
}

保持 app.config.js 文件不变，不将环境变量替换为它们的实际值。然后，创建优化的生产版本:

npm ci # if not already installed
npm run build

如果使用默认的webpack配置，app.config.js的内容会被打包到build/static/js/main.??????????。 block .js。环境变量的值可以是 envsubst ，使用这样的 bash 脚本:

main_chunk=$(ls build/static/js/main.*.js)
envsubst <$main_chunk >./main_chunk_temp
cp ./main_chunk_temp $main_chunk
rm ./main_chunk_temp

注意:在上面的示例中，envsubst 在运行时读取环境中设置的实际变量，字面意思替换了 ${ENV_VAR_1} 和 ${ENV_VAR_2} 和他们在一起。因此，您只能运行一次，因为 block 正在被覆盖。