vue項目如何通過前端實現自動識別並配置服務器環境地址

前言：

一般來說，一個web項目的生產環境和測試環境的服務器地址一旦確定下來，很少會頻繁變動的。那么就可以單獨寫一個腳本文件，通過當前訪問的域名來判斷當前的訪問環境，然后再通過一定的規則獲取對應的服務器地址。如此一來，只要設計好服務器地址適配文件，那么只需要打一次包，就可以自動區分不同的服務器環境了。你不用再為每次打包上傳不同環境都要手動改服務器地址而煩惱，也不會再出現忘了改配置文件而連接到錯誤的服務器上。

解決方案：

配置所有環境服務器地址變量——獲取當前訪問域名——根據域名判斷是否包含在服務器地址變量中，如果有則使用該服務器地址，否則使用默認配置地址。

示例代碼：

//1.定義所有環境服務器地址
const server={
    pro:"https://pro.xxx.com/api/",//生產環境
    dev:"http://dev.xxx.com/api/",//測試環境
    util:"http://util.xxx.com/api/"//其他環境，可以為空，為空則適配到測試環境
}
//2.獲取當前訪問域名，並根據域名判斷當前環境，然后獲取指定環境的服務器地址
var DOMIN="";//服務端接口訪問跟路徑
const origin=location.hostname//當前訪問域名
for(var i in server){
    var item=server[i]
    if(item.indexOf(origin)>-1){
        DOMIN=item
    }
}
//3. 特殊情況處理，如果沒有在server變量中匹配到具體環境，則依次讀取util、dev
if(!DOMIN) DOMIN=server.util?server.util:server.dev
console.log("DOMIN",DOMIN)
export default
{
  DOMIN
}

對於這種方案，可以很方便的在服務器端直接修改 server 對象中對應環境的值，無論是協議頭、域名還是端口都可以在服務器上直接修改而不用再次打包。

還有更好的方案么？

上邊的方案中，在同一個腳本中定義了環境服務器地址對象和環境判斷適配的業務邏輯，如果直接把這個給后端同事去修改，那么還是有一定風險的。那么最好還是把服務器環境地址的配置寫到一個json文件中，這樣直接給后端同事修改配置文件就好了，這樣就不會動到業務邏輯了。示例代碼如下：

server.json

{
  "pro":"https://pro.xxx.com/api/",
  "dev":"http://dev.e-mallchina.com/api/",
  "util":"https://xxx.xxx.com:8080/api/"
}

utils.js

var DOMIN="";//定義服務端接口訪問跟路徑變量
const origin=location.hostname//當前訪問域名
//讀取服務器地址配置文件
$.ajax({
    url:"./static/utils/server.json",
    async:false,
    dataType:"json",
    success:function(server){
        //遍歷服務器地址配置文件，根據當前訪問域名判斷環境，然后獲取指定的服務器地址
        $.each(server, function(key,data) {
            if(data.indexOf(origin)>-1){
                DOMIN=data
            }
        });
        //如果沒有匹配到指定的服務器地址，那么依次取util/dev（util可以為空）
        if(!DOMIN) DOMIN=server.util?server.util:server.dev
    }
});
export default
{
  DOMIN
}

注意：

讀取json文件時，需設置為同步，即 async:false ，不然是無法賦值到外邊的DOMIN變量的。

更保險的方案：

一般來說，生產環境的服務器地址都是不會輕易修改的，那么可以把生產環境的服務器地址寫在業務邏輯處理文件中，配置文件只開放測試環境和其他環境給后端，然后在業務邏輯處理文件中做好異常兼容處理，那么隨便后端折騰這個配置文件也不會影響到生產環境了。

server.json

{
  "dev":"http://dev.xxx.com/api/",
  "util":"http://xxx.xxx.com:8080/api/"
}

utils.js

var DOMIN = ""; //定義服務端接口訪問跟路徑變量
const proServer = "https://xxx.xxx.com/api/"
const origin = location.hostname //當前訪問域名
//根據當前訪問域名判斷並獲取對應環境的服務器地址
if(proServer.indexOf(origin) > -1) {
    //生產環境
    DOMIN = proServer
} else {
    //非生產環境則讀取服務器地址配置文件
    $.ajax({
        url: "./static/utils/server1.json",
        async: false,
        dataType: "json",
        success: function(server) {
            //遍歷服務器地址，判斷當前訪問環境並獲取對應的服務器地址
            $.each(server, function(key, data) {
                if(data.indexOf(origin) > -1) {
                    DOMIN = data
                }
            });
            //如果沒有匹配到指定的服務器地址，那么依次取util/dev（util可以為空）
            if(!DOMIN) DOMIN = server.util ? server.util : server.dev
            //未獲取到服務器地址的異常處理
            if(!DOMIN) {
                alert("服務器地址配置錯誤,請檢查")
            }
        },
        error: function(xhr) {
            alert("服務器地址文件訪問錯誤： " + xhr.status + " " + xhr.statusText);
        }
    });
}
export default {
    DOMIN
}

注意：上邊已經做了異常處理，雖然不做也可以，還是建議保留這幾行代碼，對后端同事會比較友好一些。