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

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

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

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

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

然后在您的组件中：

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

Answer 2

你应该AWS_ENV在你的 webpack.prod.js 中设置 var。

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