如何从AngularJS访问Heroku上的环境变量

我在Heroku上有3个AngularJS应用程序。它们各自使用不同的API

（例如：angularjs开发使用api开发，angularjs qa使用api qa）

我创建了如下的常量文件

SITE     = 'dev'
API_SITE = {
      dev       : 'dev-url',
      qa        : 'qa-url',
      production: 'production-url'
}

然后，当我需要API url时，我这样调用它

API\u SITE[SITE]

这个问题是当我想部署到qa时，我必须将

站点

更改为

qa

我想知道：我们可以让AngularJS读取Heroku上定义的环境变量，这样我们就不必再次手动更改它了吗

注: 我知道AngularJS正在客户端运行。所以，我不知道怎么做

---

有人吗

我是这样做的。我将变量附加到

app.locals

对象，该对象可以通过Jade编译成HTML，我只需将它们分配到javascript对象中

server.js

app.locals.env = process.env["dev"];
app.get('/', function(req, res){
    res.locals.particular = "to this request";
    res.render('view.jade');
});

view.jade

if(env)
    script var env = !{JSON.stringify(env)}

---

如果有人正在寻找解决方案（基于我的环境：Heroku上的AngularJS和NodeJS）

我将此代码添加到web.js（NodeJS启动文件）

然后，在文件index.html中，我刚刚添加了

，用于检索

SITE

变量

---

它工作得很好。

因为这个问题询问了如何访问变量复数，对于我自己的用例，我有多个配置变量用于客户端，我想分享一种方法，通过一个get请求将变量从heroku发送到客户端。它类似于@BunSuwanparsert answer，但不是使用

res.send（）

我使用了

res.write（）

---

然后在index.html中添加脚本。如果您正在使用webpack捆绑客户端应用程序，则可以使用DefinePlugin创建全局常量，该常量可在编译时配置

要实现这一点，请在webpack.config.js中添加以下内容：

var constants = {
     'webpack.constants.envVar1' : process.env.HEROKU_ENV_VAR_1,
     'webpack.constants.envVar2' : process.env.HEROKU_ENV_VAR_2,
     ...
};

module.exports = {
    ...
    plugins: [new webpack.DefinePlugin(constants),..],
    ...
};

然后，您可以在AngularJS客户端应用程序的任何位置引用Heroku环境变量，例如

doSomething(webpack.constants.envVar1);

然而，这样做并不一定意味着应该这样做，至少在Heroku上不应该这样做。 在Heroku上这样做可能不是一个好主意的原因是这个方案不能很好地发挥作用

网页包需要作为的一部分运行，例如在

---

现在，如果你有一个Heroku管道，比如说开发、登台和生产应用程序，并且你的部署工作流是git推送到开发应用程序，然后是slug推送到登台，然后是生产应用程序，那么请注意，slug只有在你git推送到开发应用程序时才会生成。在提升管道时，它不会随后重建。这意味着webpack只运行一次，如果您采用上述方案在AngularJS应用程序中使用env var，则登台和生产应用程序的AngularJS客户端将最终使用您分配给开发应用程序的Heroku env var值，这可能不是您想要的

我有点困惑。你在Heroku上使用环境变量吗？@BunSuwanparsert

process.env

会给你环境变量，希望能把它清除掉。我个人不在Heroku上，但我在其他主机上使用它们。很好的小技巧。res.send（）部分在所有连接中看起来都很奇怪，但它起了作用！：）我总是得到SITE=未定义。我应该手动设置process.env.SITE吗？@ste你应该先手动设置看看是否有效，然后将其更改为process.env.SITE是的，按照你说的做了，效果很好：）谢谢，洛蒂实际上需要做更多的工作，才能从webpack.config将我的环境变量导入我的angular客户端

const常量={'API_KEY'：JSON.stringify（process.env.API_KEY）}

我必须将process.env.API_KEY包装在JSON.stringify（）中。我必须

[plugins:new webpack.DefinePlugin（{'process.env'：constants}）]

用对象和属性'process.env'包装constants对象，然后在客户端中我可以得到如下的env变量

const config={apiKey:process.env.API_KEY}

那么你知道如何让Heroku Pipeline应用程序实现这一点吗？Heroku Pipeline应用程序实现这一点的一种方法是，在angular应用程序初始化时，只需向服务器发送一个请求，请求任何环境变量。这样，每个Heroku管道应用程序返回给客户机的env var值可能不同。这基本上就是@BunSuwanparsert所建议的。

<script src="/config.js"></script>

var constants = {
     'webpack.constants.envVar1' : process.env.HEROKU_ENV_VAR_1,
     'webpack.constants.envVar2' : process.env.HEROKU_ENV_VAR_2,
     ...
};

module.exports = {
    ...
    plugins: [new webpack.DefinePlugin(constants),..],
    ...
};

doSomething(webpack.constants.envVar1);