前言

在使用angular腳手架構(gòu)建angular項目時，都會給我們生成一個名叫environments的文件夾。從字面意識理解像是環(huán)境變量的意思。

可以看見后綴不一樣

有卵用

他們分別是每個環(huán)境對應(yīng)的配置，執(zhí)行不同的命令，就會調(diào)用不同的文件。

例如：
比如environment.prod.ts對應(yīng)的就是prod環(huán)境，你有多少個環(huán)境這里就新建多少個文件。（當(dāng)然沒有的就是默認的運行環(huán)境）

只有這些文件并起不了作用。關(guān)鍵在這里

到angular-cli.json文件找到environments這個屬性進行配置，比如

這才是起作用的地方

使用

奇怪它怎么知道是哪個文件呢？

本地調(diào)試的時候

ng s -e=prod

簡單解釋下，
ng：angular腳手架提供的命令操作
s: serve 的簡寫，運行程序
-e=prod： -env=prod的簡寫，大概意思就是啟用prod的運行環(huán)境配置，prod就是在上面json文件中配置的環(huán)境名。

發(fā)布的時候，當(dāng)然用法也是一樣，不過通常我們都是把ng命令封裝在package.json文件中。如下：

簡化了

我們使用 npm run start就等于使用了ng serve --port 4001 --open這個命令。

場景

在angular項目開發(fā)中，前后臺分離，后臺api地址生產(chǎn)環(huán)境，測試環(huán)境，開發(fā)環(huán)境的api地址可定都不會是同一個ip地址。這樣通過environments來控制的話，就不擔(dān)心在測試，生產(chǎn)，開發(fā)環(huán)境來回切換時去改配置文件了。

演示一下

默認環(huán)境

默認環(huán)境

  ng s 

打開瀏覽器查看

和配置的一樣

其他環(huán)境

其他環(huán)境

ng s -e=dprod --hmr 

見證奇跡