假設(shè)有三個(gè)環(huán)境：開(kāi)發(fā)環(huán)境（dev）、測(cè)試環(huán)境(test)喝峦、生產(chǎn)環(huán)境(prod)。
當(dāng)我們構(gòu)建參數(shù)時(shí)會(huì)用到 --environment來(lái)指定應(yīng)用執(zhí)行環(huán)境。腳手架會(huì)根據(jù)指定的值加載對(duì)應(yīng)的環(huán)境配置文件诡蜓。如：ng build --env=dev 就是build開(kāi)發(fā)環(huán)境的包。那么我們就從這里開(kāi)始看看Angular項(xiàng)目里環(huán)境該怎么配置胰挑。
- 首先要找到.angular-cli.json文件的environments關(guān)鍵詞進(jìn)行如下配置：
"environmentSource": "environments/environment.ts", // 基礎(chǔ)環(huán)境配置
"environments": { // 子環(huán)境配置文件
"dev": "environments/environment.ts",
"test": "environments/environment.test.ts",
"prod": "environments/environment.prod.ts"
}
- 再進(jìn)入environments文件夾
文件目錄：
├─ environments
│ ├─ common.json
│ ├─ environment.ts
│ ├─ development.json
│ ├─ environment.test.ts
│ ├─ test.json
│ ├─ environment.prod.ts
│ └─ production.json
│
- 這里可以創(chuàng)建一個(gè) common.json文件以存儲(chǔ)三套環(huán)境公共的配置：
{
"title": "",
"question": {
"url": ""
},
"list": {
"pageSize": 10
}
}
開(kāi)發(fā)環(huán)境 ：
- environment.ts
export const environment = Object.assign({}, require('./common.json'), require('./development.json'), {
production: false,
envName: 'dev'
});
- development.json
{
"baseUrl": "/",
"env": "dev",
"api": {
"host": "http://localhost:4200"
}
}
測(cè)試環(huán)境：
- environment.test.ts
export const environment = Object.assign({}, require('./common.json'), require('./test.json'), {
production: false,
envName: 'test'
});
- test.json
{
"baseUrl": "/",
"env": "test",
"api": {
"host": "testurl"
}
}
生產(chǎn)環(huán)境：
- environment.prod.ts
export const environment = Object.assign({}, require('./common.json'), require('./production.json'), {
production: true,
envName: 'prod'
});
- production.json
{
"baseUrl": "/",
"env": "prod",
"api": {
"host": "produrl"
}
}
- 在項(xiàng)目的service中相對(duì)路徑引入環(huán)境再請(qǐng)求接口,偽代碼如下：
...
@Injectable()
export class LoginService {
public Login(): Observable<any> {
return this.http.get("/login").map(
response => {
return response.json();
}
)
}
}
（完）
