Question

我试图设置一些环境。我做了Heroku上的变量，打开Heroku仪表板时可以在应用程序中看到这些变量。但是，当我尝试从我的应用访问变量时，它返回undefined有什么想法吗？

componentDidMount() {
    console.log('this env' , process.env.backEndServer) // undefined
}

检查Heroku CLI：

$ heroku config:get backEndServer // https://myserver.com

Answer 1

如果您检查Heroku构建日志，则建议您指定一个nodejs版本，如果在package.json中指定了应该解决该问题的节点版本。

package.json

{
...
  "engines": {
   "node": "12.13.1"
   },
...
}

Answer 2

您正在尝试在客户端访问环境变量，这是不可能的。

如果要在客户端应用程序上使用环境变量，则需要设置Webpack来处理不同的环境。

在Webpack配置文件中，您将使用Webpack’s Define plugin为每个环境定义全局变量。

也不要忘记将NODE_ENV配置变量添加到您的heroku应用程序并将其设置为true. So you'll be sure that by accessing process.ENV.NODE_ENV will force runtime to use node.js`环境。

现在，您可以按以下方式配置生产环境：

/* in webpack.config-prod.js */
...,
plugins: [    
  new webpack.DefinePlugin({           
    NODE_ENV: JSON.stringify(process.env.NODE_ENV),      
    API_HOST: JSON.stringify(process.env.API_HOST)
  })
],
...

现在，您可以轻松地在客户端应用程序中访问环境变量。

heroku环境变量返回未定义

2 个答案: