項目在打包發(fā)布的時候往往需要配置不同的server的地址撇他，當(dāng)然，有些同學(xué)用的是nginx轉(zhuǎn)發(fā)誊抛，因此不需要列牺。
但不僅僅局限于請求地址，有可能某些變量密鑰等等拗窃，比如微信的appid瞎领，測試環(huán)境和正式環(huán)境用的可能是不一致的泌辫。
為了方便打包，angular工程化中為開發(fā)者做了一些改進(jìn)九默。打包時候震放，引入environment的設(shè)計。
請看工程文件目錄：
image
注意一下幾點：
1 environments中可以配置多套不同的環(huán)境
2 默認(rèn)引入的都是environment.ts驼修，這一點必須一致殿遂。
3 修改angular.json
4 打包指定參數(shù) ----configuration=dev
打開配置 angular.json
json中的projects -> 項目名 -> architect -> build -> configurations -> production。增加不同的環(huán)境配置乙各，復(fù)制比較容易墨礁。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
}
}
},
然后設(shè)置 json中的projects -> 項目名 -> architect -> serve，這樣就可以在ng serve中增加更多的環(huán)境配置觅丰， 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
}
}
},
是不是很簡單呢饵溅，有任何問題就在下面留言吧！
