angular7的多环境(开发环境、测试环境、生产环境)配置

在angular程序开发的时候,我们一般会使用三种环境,比如:开发环境、测试环境、生产环境。针对不同的环境使用不同的代码,比如接口地址。

配置开发环境、测试环境、生产环境

开发环境:environment.ts——用于程序开发 (创建项目时自动生成)

export const environment = {
  production: false,
  baseUrl: '开发环境url'
};

测试环境:environment.test.ts——用于程序完成,测试产品 (手动创建)

export const environment = {
    production: true,
    baseUrl: '测试环境url'
  };

生产环境:environment.prod.ts——测试完成,可对外开发 (创建项目时自动生成)

export const environment = {
  production: true,
  baseUrl: '生产环境url'
};
配置angular.json, 在构建的时候,可替换为相应的环境文件;

比如添加测试(test)环境文件:

首先在angular.json文件中复制production部分代码,然后放在当前代码的后面,将production更改为test, 文件引用更改为environment.test.ts

"production": {
"fileReplacements": [
     {
       "replace": "src/environments/environment.ts",
       "with": "src/environments/environment.prod.ts"
     }
   ],
   "optimization": true,
   "outputHashing": "all",
   "sourceMap": false,
   "extractCss": true,
   "namedChunks": false,
   "aot": true,
   "extractLicenses": true,
   "vendorChunk": false,
   "buildOptimizer": true,
   "budgets": [
     {
       "type": "initial",
       "maximumWarning": "2mb",
       "maximumError": "5mb"
     }
   ]
 },

复制更改后的代码为:

"test": {
 "fileReplacements": [
   {
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.test.ts"
   }
 ],
 "optimization": true,
 "outputHashing": "all",
 "sourceMap": false,
 "extractCss": true,
 "namedChunks": false,
 "aot": true,
 "extractLicenses": true,
 "vendorChunk": false,
 "buildOptimizer": true,
 "budgets": [
   {
     "type": "initial",
     "maximumWarning": "2mb",
     "maximumError": "5mb"
   }
 ]
}
配置不同环境下的url

http.service.ts

import { environment } from '../../environments/environment';

console.log(environment.baseUrl);
构建所需环境的项目
  1. 构建生产环境项目
// 默认使用的就是environment.prod.ts
ng build
  1. 构建测试环境项目
ng build --configuration=test
  1. 开发环境
ng serve // 直接启动默认就是生产环境
  1. 压缩文件
--prod :   压缩构建文件
ng build --prod
不同环境构建截图
  1. 生产环境
    在这里插入图片描述
  2. 测试环境
    在这里插入图片描述
  3. 开发环境
    在这里插入图片描述
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值