项目在打包发布的时候往往需要配置不同的server的地址，当然，有些同学用的是nginx转发，因此不需要。
但不仅仅局限于请求地址，有可能某些变量密钥等等，比如微信的appid，测试环境和正式环境用的可能是不一致的。
为了方便打包，angular工程化中为开发者做了一些改进。打包时候，引入environment的设计。
请看工程文件目录：
image
注意一下几点：
1 environments中可以配置多套不同的环境
2 默认引入的都是environment.ts，这一点必须一致。
3 修改angular.json
4 打包指定参数 ----configuration=dev
打开配置 angular.json
json中的projects -> 项目名 -> architect -> build -> configurations -> production。增加不同的环境配置，复制比较容易。ng build --prod -c=dev：
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
},
"src/manifest.webmanifest"
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": []
},
"configurations": {
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.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"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"uat": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.uat.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"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"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"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"ci": {
"progress": false
}
}
},
然后设置 json中的projects -> 项目名 -> architect -> serve，这样就可以在ng serve中增加更多的环境配置， ng serve -c=dev
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"uat": {
"browserTarget": "app:build:uat"
},
"dev": {
"browserTarget": "app:build:dev"
},
"ci": {
"progress": false
}
}
},
是不是很简单呢，有任何问题就在下面留言吧！
网友评论