根据环境(开发、暂存、生产）进行角度配置

Angular config according to environment (dev, staging, production)

本文关键字：配置 暂存 环境 开发 生产      更新时间：2023-09-26

我知道这很傻——每次我更改环境时，我都会注释掉并支持我的应用程序的配置工厂。肯定有更好的方法，是吗？

我想检查一下网址，但这似乎是一种糟糕的做法。我想到的另一个选择是在构建过程中使用某种狼吞虎咽的NPM——然而开发没有构建过程。

angular.module('myApp.services')
    .factory('GemsConfig', function () {
        return {
            //apiServer: "http://localhost:3000/v2/",
            //apiServer: "https://staging.gems.org/v2/",
            apiServer: "https://api.gems.org/v2/",
            //giphyServer: "http://api.giphy.com/v1/gifs/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            //giphyKey: 'xxx',    // testing
            giphyKey: 'xxxx'
        };
    })

创建两个配置，一个用于生产，另一个用于开发。并创建一个变量，该变量可以具有两个值，即"生产"或"开发"。基于这个变量调用您的配置。这样，您只需要更改变量的名称。

例如。

angular.module('myApp.services')
    .factory('GemsConfig', function () {
        var currentEnv = "production";
        var config  = {
          development :{
            apiServer: "https://api.gems.org/v2/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            giphyKey: 'xxxx'
        },
          production :{
            apiServer: "https://api.gems.org/v2/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            giphyKey: 'xxxx'
        }
        };
        return config[currentEnv];
     })

编辑

或者更好的解决方案：创建三个配置1） 公共2） 生产3） 开发

您可以将公共配置参数保留在"common"公共配置中，也可以在"production"或"development"中重写它们。至少您必须合并您的"当前环境"-（生产或开发）配置和"通用"配置。为此，您可以使用angular.extend函数。

例如。

 angular.module('myApp.services')
        .factory('GemsConfig', function () {
           var currentEnv = "production";
            var config  = {
                common:{
                  TTL: 5000,
                  OS: 'web',
                  version: '1.1',
                  apiVer: '2.0',
                  checkBalanceEveryXSeconds: 600,
                  giphyKey: 'xxxxx'
                },
               development :{
                  apiServer: "https://api.gems.org/v2/",
                  giphyServer: "https://api.giphy.com/v1/gifs/",
                },
                production :{
                  apiServer: "https://api.gems.org/v2/",
                  giphyServer: "https://api.giphy.com/v1/gifs/",
                  TTL:800,
                }
            };
            return angular.extend(config['common'],config[currentEnv]);
});
相关文章：