美文网首页
Angular 项目多环境配置-开发、测试、产品环境配置分离

Angular 项目多环境配置-开发、测试、产品环境配置分离

作者: 4ea0af17fd67 | 来源:发表于2018-11-09 13:47 被阅读147次

    项目多环境配置

    1. 方案一:利用angular cli 打包时处理,不同的环境打出不同的包文件
    2. 方案二:外置配置文件,方便线上修改,不需要每次修改都打包文件

    方案一:开发时配置

    angular cli 创建项目后会自动生成两个环境配置文件:

    src/environments目录下会生成两个环境配置文件
    #environment.ts 代表开发时使用的环境
    默认内容如下
    export const environment = {
      production: false,
    };
    #environment.prod.ts 代表产品上线时使用的环境
    默认内容如下
    export const environment = {
      production: false,
    };
    

    原理是,cli build或者server时,根据名词参数--env=环境配置文件简称切换配置文件
    而环境配置文件的简称在.angular-cli.json文件中声明,具体如下


    如果你想增加其他环境配置,只需修改这里即可。

    如何使用

    修改下配置文件,然后看使用效果
    修改environment.ts
    
    export const environment = {
     production: false,
     testurl:"我是开发环境"
    };
    
    
    修改environment.prod.ts
    export const environment = {
     production: true,
     testurl:"我是生成环境"
    };
    
    # 然后在根组件app.component.ts中引用一下环境配置文件
    1. 导入环境
    import {environment} from "../environments/environment";
    2. 然后调用
    ngOnInit() {
       alert(JSON.stringify(environment));
    }
    运行命令
    ng serve 页面会弹出 {production: true, testurl:"我是生成环境"}
    ng serve --env=prod 页面会弹出 {production: true, testurl:"我是产品环境"}
    3. 这里注意有个默认值,cli命令的默认值是 dev ,代码中默认使用 imporet的文件,
    你会发现我们import的是environment.dev,但是这里import什么版本其实不重要,
    因为@Angular/cli会在编译时根据你给的--env参数自己动态替换。
    当然,如果你不给--env参数,它就默认使用这里import的版本了
    

    方案二:线上可配置

    有时候build大包好了代码,放到服务器上,当服务器ip变更后,只要简单修改配置文件,便可完成环境配置。

    src/assets文件增加一个配置文件,比如conf.json,把所有的配置写到这个文件,然后在页面使用时,动态加载这个文件。

    -- 示例代码
    this.httpClient.get('/conf.json').subscribe(data=>{
    //todo 拿到了配置文件
    });
    
    

    下次需要修改文件,服务器上改conf.json即可。

    相关文章

      网友评论

          本文标题:Angular 项目多环境配置-开发、测试、产品环境配置分离

          本文链接:https://www.haomeiwen.com/subject/fjnnxqtx.html