Question

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

使用serve在构建后运行应用程序，如果我们通过运行ENV=production npm run start启动带有开发代码的应用程序，它可以读取process.env.ENV变量，因为我正在添加此插件webpack dev config

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

我还将上面的脚本添加到webpack prod config中，但如果我在构建ENV=prod serve -s build后尝试此命令，则无法读取环境变量

如何解决这个问题？

Answer 1

您无法阅读ENV var的原因是：

（1）在开发模式下webpack监视您的文件，并即时捆绑您的应用程序。它还将读取（因为DefinePlugin）您的process.env.ENV并将其添加为全局变量。所以它基本上是从process.env到你的JS应用程序的管道变量。

（2）在您构建您的应用（使用webpack）之后，所有内容都已捆绑到一个或多个文件中。当您运行serve时，您只需启动一个提供静态构建文件的HTTP服务器。因此，无法将ENV传送给您的应用。

基本上DefinePlugin的作用是向捆绑包添加var。 E.g。

new webpack.DefinePlugin({
  'token': '12356234ga5q3aesd'
})

将添加与此类似的行：

var token = '12356234ga5q3aesd';

由于JS文件是 static ，因此之后无法更改此变量，您已使用webpack构建/捆绑它。基本上，当您执行npm run build时，您将创建已编译的二进制文件/ .dll / .jar / ...文件，并且无法再通过插件影响其内容。

Answer 2

如果您在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.????????.chunk.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在运行时读取环境中设置的实际变量，并且 literally 用它们替换${ENV_VAR_1}和${ENV_VAR_2}。因此，您只能运行一次，因为该块已被覆盖。

Answer 3

您可以在项目的根目录中添加一个@Override protected List<CreateKeyspaceSpecification> getKeyspaceCreations() { CreateKeyspaceSpecification specification = CreateKeyspaceSpecification.createKeyspace(KEYSPACE); return Arrays.asList(specification); }文件，并在其中定义环境变量。这将是您的默认（生产）环境变量定义。但是随后您可以使用一个名为.env的本地文件来覆盖默认值。

定义环境变量时，请确保它们以.env.local开头，以便您的环境变量定义如下所示：

REACT_APP_

此外，请将其添加到.gitignore中，以免提交本地替代：

REACT_APP_SERVER_URL=https://my-awesome-app.herokuapp.com

参考： Adding Development Environment Variables In .env (create-react-app)

Answer 4

来自create-react-app documentation：

您的项目可以使用环境中声明的变量，就像它们是在您的JS文件中本地声明的。默认情况下，您将拥有为您定义的NODE_ENV，以及所有其他环境变量与REACT_APP _。

您可以在代码内的process.env中读取它们：

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}

create react app在构建后无法读取环境变量

4 个答案: