我在 Heroku 上有 3 个 AngularJS 应用程序。它们每个都使用不同的 API。
（例如：angularjs-dev消耗api-dev，angularjs-qa消耗api-qa）
我在下面创建了这样的常量文件
SITE = 'dev'
API_SITE = {
dev : 'dev-url',
qa : 'qa-url',
production: 'production-url'
}
然后当我想要 API url 时，我这样称呼它API_SITE[SITE]
这个问题是当我要部署到qa时，我必须将SITE更改为qa。
我想知道：我们能否让 AngularJS 读取 Heroku 上定义的环境变量，这样我们就不必再次手动更改它了
注意： 我知道 AngularJS 在客户端运行。所以，我不知道该怎么做。
有人吗？
【问题讨论】：
如果有人正在寻找解决方案（基于我的环境：Heroku 上的 AngularJS 和 NodeJS）
我将此代码添加到 web.js（NodeJS 起始文件）
var options = {};
var jade = require('jade');
app.get('/site.js', function(req, res){
res.send("var SITE='"+process.env.SITE+"'");
});
然后，在文件 index.html 中，我刚刚添加了 <script src="/site.js"></script> 用于检索 SITE 变量。
效果很好。
【讨论】：
由于这个问题询问如何访问变量复数并且对于我自己的用例，我有多个用于客户端的配置变量，我想分享一种通过一个 get 请求将变量从 heroku 发送到客户端的方法。它类似于@BunSuwanparsert 答案，但我没有使用res.send()，而是使用res.write()
//server.js
app.get('/config.js', function(req, res){
res.write("var SOME_URL='"+process.env.SOME_URL+"'" + '\n');
res.write("var API_KEY='"+process.env.API_KEY+"'" + '\n');
res.write("var AUTH_DOM='"+process.env.AUTH_DOM+"'" + '\n');
res.write("var STRG_BUCKET='"+process.env.STRG_BUCKET+"'" + '\n');
res.write("var MSG_SND_ID='"+process.env.MSG_SND_ID+"'" + '\n');
res.end();
});
<script src="/config.js"></script>【讨论】：
如果您使用 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 Pipelines 不能很好地配合。
Webpack 需要作为Heroku slug compilation 的一部分运行，例如在npm postinstall script。
现在，如果您有一个 Heroku 管道，其中包含开发、登台和生产应用程序，并且您的部署工作流程是将 git push 到开发应用程序，然后到 promote slug 到您的登台，然后到您的生产应用程序，然后请注意，只有当您 git push 到您的开发应用程序时才会构建 slug。当升级到管道时，它不会随后重建。这意味着 webpack 只运行一次，并且如果您使用上述方案在 AngularJS 应用程序中使用 env vars，您的登台和生产应用程序的 AngularJS 客户端最终将使用您分配给开发应用程序的 Heroku env var 值，这可能不是你想要的！
【讨论】：
const constants = { 'API_KEY': JSON.stringify(process.env.API_KEY) } 我必须将 process.env.API_KEY 包装在 JSON.stringify() 中。我必须[ plugins: new webpack.DefinePlugin({ 'process.env': constants }) ] 用'process.env' 的对象和属性包装常量对象，然后在客户端我可以得到这样的环境变量const config = { apiKey: process.env.API_KEY }