heroku 环境变量返回未定义答案

【问题标题】：heroku environment variables return undefinedheroku 环境变量返回未定义
【发布时间】：2019-01-08 05:38:59
【问题描述】：

我尝试设置一些环境。 Heroku 上的变量和我一样，我可以在打开 Heroku 仪表板时看到应用程序中的变量。但是当我尝试从我的应用程序访问变量时，它返回undefined 任何想法？

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

检查 Heroku cli：

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

【问题讨论】：

有趣。这有帮助吗？ stackoverflow.com/questions/47561604/…
另外，process.env 中是否显示了其他环境变量？
@SudhanshuVishnoi 我用谷歌搜索了它的地狱，你根本无法从客户端访问process.env，这是我试图访问它的地方
你是否在服务器端使用 react 来渲染？
@SudhanshuVishnoi 不，我使用反应但渲染客户端

标签： javascript node.js reactjs heroku

【解决方案1】：

如果您查看 Heroku 构建日志，它建议您指定 nodejs 版本。如果您在 package.json 中指定节点版本，它可能会解决问题。

package.json

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

【讨论】：

不好，这对我没有任何好处。仍然缺少 ENV 变量

【解决方案2】：

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

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

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

另外不要忘记将NODE_ENV 配置变量添加到您的heroku 应用并将其设置为true. So you'll be sure that by accessingprocess.ENV.NODE_ENVwill force runtime to usenode.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)
  })
],
...

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

【讨论】：