Question

在我的React App中，我使用一个.env文件来保留一些API密钥。但是，当我尝试使用process.env访问这些变量时，值似乎是undefined。

我使用以下命令启动应用。

yarn build; cd dist; static-server --index ./login/index.html -p 1234

我尝试重新启动服务器，删除dist文件夹并重建，但是没有用。

这是我访问变量的地方。在constants.js中

const MY_API_KEY = process.env.REACT_APP_MY_API_KEY;
// some more consts here

module.exports = {MY_API_KEY};

但是，当我在constants.js文件中执行console.log(process.env.REACT_APP_MY_API_KEY)时，它打印了控制台的密钥，并且MY_API_KEY被初始化为正确的值。

这里可能出了什么问题？

Answer 1

在React中访问环境变量与在Node环境中工作时的方式有些不同。

您需要配置Webpack来处理环境变量，还需要安装NPM库来加载这些变量。

首先安装node-env-file，这使您可以加载环境变量。

然后对于Webpack部分，您需要执行以下操作：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"',
      REACT_APP_MY_API_KEY: JSON.stringify(process.env.REACT_APP_MY_API_KEY)
    }
  }),
]

Answer 2

您已按照https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

中的说明正确定义了环境变量

由于console.log(process.env.REACT_APP_MY_API_KEY)时它会打印正确的值，因此听起来像是导入/导出问题。

尝试

export const MY_API_KEY = process.env.REACT_APP_MY_API_KEY;

import {MY_API_KEY} from '../my-environment-variables'

无法使用process.env访问React环境变量

2 个答案: