平常我們團隊開發時,都在公司的區域網內,呼叫介面也是區域網內部的,但是專案上線時,請求介面是線上伺服器端的,那麼就有介面之間的來回切換問題.在使用vue-cli搭建專案以後,做相關配置就可以實現,不用手動更改介面路徑,也可以請求不同環境下的介面.

1.設定不同的介面地址

先找到以下檔案

/config/dev.env.js

/config/prod.env.js

可以看到dev.env.js裡面內容如下

這是生產環境的引數配置,然後我們可以再上面檔案加入一行程式碼,如下:

這就是本地測試環境請求後臺介面的域名

然後找到prod.env.js檔案,如下:

我們加入一行程式碼,如下:

這是我們上傳伺服器以後,請求後臺介面的域名

2.在程式碼中呼叫設定好的引數,

比如我在本專案中重新封裝axios(api檔案在/src/api/index.js中),將配置好的介面地址作為baseURL拼接到介面路徑中,應用引數部分如下:

最後重新啟動專案就可以了,當npm run dev的時候就執行在生產環境,當npm run build的時候就是正式的線上環境.

在使用axios的時候會發現沒有jsonp的請求方式,所以如果要使用axios直接進行跨域訪問是不可能的,這樣就需要配置代理了.

因為客戶端請求服務端的資料是存在跨域問題,但是伺服器與伺服器之間可以通過雲處理服務商或者其他的方法實現共享資料,所以說伺服器沒有跨域的概念(如果伺服器沒有設定禁止跨域許可權的問題),那麼這樣,我們可以配置一個代理伺服器來請求另一個伺服器中的資料,然後把請求的資料返回到我們的代理伺服器中,代理伺服器在返回資料到客戶端,這就可以實現跨域訪問資料.

3.在config/index.js中找到dev物件

我的簡書http://www.jianshu.com/writer#/notebooks/22019482/notes/23690935