在一个简单的反应应用程序中读取环境变量

Question

我使用 create-react-app 模块创建了一个应用程序，并且在一个组件中，我正在尝试读取一个环境。 var，像这样

<p style={textStyle}>Environment: { process.env.AWS_ENV || process.env.NODE_ENV }</p>

我用 AWS_ENV=live npm start 启动应用程序，但它从不读取此变量。结果总是 development。我注意到，如果我使用 npm run build 构建应用程序，输出将是 production，但无论如何我无法读取 AWS_ENV var

Answer 1

您应该在 webpack.prod.js 中设置 AWS_ENV 变量。

new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production'),
        'AWS_ENV': JSON.stringify('live npm start')
      }
    }),

Answer 2

create-react-app 使用 https://github.com/motdotla/dotenv。要将 ENV 加载到 Webpack 并在浏览器中传递它，运行在控制台中执行以下命令：

echo -e 'REACT_APP_AWS_ENV=live' > .env
npm start

注意 REACT_APP_ create-react-app 的特殊前缀。

然后在你的组件中：

...
{ process.env.REACT_APP_AWS_ENV }
...

在一个简单的反应应用程序中读取环境变量

read environment vars in a simple react app

reactjs

create-react-app