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);
构建所需环境的项目
- 构建生产环境项目
// 默认使用的就是environment.prod.ts
ng build
- 构建测试环境项目
ng build --configuration=test
- 开发环境
ng serve // 直接启动默认就是生产环境
- 压缩文件
--prod : 压缩构建文件
ng build --prod
不同环境构建截图
- 生产环境
- 测试环境
- 开发环境
标签:false,环境,ts,environment,angular7,true,测试环境 来源: https://blog.csdn.net/yw00yw/article/details/90170773