內容導讀

angular2+本地ng serve啟動起來的時候一般都是development mode。在dev模式下，我們ng serve啟動，默認使用production：false。再來看根目錄下angular-cli.json文件。也就是ng build --prod得出的代碼不再使用development mode。這就需要再回去angular-cli.json的配置。實際上environments我們可以創建多個environment的文件來供不同的環境調用。

angular2+本地ng serve啟動起來的時候一般都是development mode。控制檯會有如下提示。

一般本地是用development mode。當我們發佈出去到test，stg和prod環境的時候需要開啟prod mode

也就是控制檯裡提示的enableProdMode。

在項目裡有哪些地方進行這些控制，我們來看看。

environment.ts

首先我們src目錄下有個environments文件夾，默認下面有2個文件，environment.ts是本地啟動是默認使用的文件，我們來看內容

可以看到裡面一個參數production： false。

不錯就是這個參數來控制我們的dev mode。

在dev模式下，我們ng serve啟動，默認使用production：false。

main.ts

再來看src目錄下的main.ts文件

可以看到是否開始enableProdMode是根據producition來確定的。

那enviroment.prod.ts文件什麼時候使用。

angular-cli.json

再來看根目錄下angular-cli.json文件。

這裡有配置，默認模式下我們使用的是environment.ts

發佈的時候我們運行ng build --prod這時候environment會調用environment.prod.ts配置。也就是ng build --prod得出的代碼不再使用development mode。

我們可以打開build之後的文件查看就可以驗證，

打開main.************.js,搜索production

也就是production:true.

如果我們在不同的環境有不同的配置呢，比如API，不同的環境分別調用對應環境的API，或者還需要其他的配置的話。

API的話只需要Apiurl: ‘/api’ 使用相對路徑在進行對應的調用即可，再有其他的配置我們這樣可沒法解決了。

這就需要再回去angular-cli.json的配置。

實際上environments我們可以創建多個environment的文件來供不同的環境調用。怎麼配置不同的環境調用不同的配置呢。如下我們可以在創建一個stg的environment.stg.ts文件.

然後在angular-cli.json裡進行相應的配置

剩下的就是我們在build的時候加參數進行處理了。

我們先查看下ng build的參數，利用--help

可以看到有個environment參數，簡寫-e

也就是

ng build --prod -e dev 調用dev對應的environment文件

ng build --prod -e stg 調用stg對應的environment文件

ng build --prod -e prod 調用prod對應的environment文件。

ok，到這裡，問題解決。

Tips

--base-href 一般在build的時候也需要指定下。需要的可以自己百度下。