欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

​ngCli 区分生产环境与开发环境的配置 有大用

ngCli 区分生产环境与开发环境的配置

dogLin
字数 454阅读 1,076

场景需求:

在开发过程中请求的后台地址使用的是某一台服务器的地址(固定ip),但是生产环境的时候前端与后端在用一台服务,使用nginx做代理转发,这个时候需要改为'/api',因为比较菜,之前一直都是编译的时候手动改,然后把前后端全部打包成一个安装包,但是老是忘了改。然后5分钟的打包时间就浪费了。然后实在受不了,就想找解决办法,就像node一样可以设置环境变量来区分不同的开发环境。

解决

ancli构建的工程下都有一个enviroments文件夹,下面放了两个不同环境对应的配置文件。
[图片上传失败...(image-2d61e2-1513820077808)]

两个文件分别对应生产与开发环境,可以在这两个文件分别配置两个环境的全局变量

//开发 environment.ts
export const environment = {
  production: false,
  config: {
    apiUrl: 'http://192.168.9.164:3000'
  }
};
//environment.prod.ts 生产
export const environment = {
  production: true,
  config: {
    apiUrl: '/api'
  }
};

上面配置好之后,就可以在用到apiUrl的地方引用它,代码如下:

import { environment } from './../environments/environment';
@Injectable()
export class ApiServiceService {

  host = environment.config.apiUrl;
  ....

代码上虽然引用的是开发环境的全局配置,但是c'li在.angular-cli.json里面配置了不同的环境对应的配置文件

"environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }

然后当你在启动或者编译的时候可以带上 --prod这样项目就会加载生产环境的配置文件

ng serve --prod //启动
ng build --prod //构建

不带的话默认的环境为开发环境。

以上,就初步达到了我的需求。以后可以在研究更高级的构建办法。

当然你也可以自定义个环境,相应的就要在.angular-cli.json里添加一个环境的配置,以及添加一个配置文件。

来自  https://www.jianshu.com/p/891ccd497684

普通分类: