其他分享
首页 > 其他分享> > angular7的多环境(开发环境、测试环境、生产环境)配置

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. 开发环境
    在这里插入图片描述

标签:false,环境,ts,environment,angular7,true,测试环境
来源: https://blog.csdn.net/yw00yw/article/details/90170773