不同環(huán)境下如何配置代理

實(shí)際開發(fā)的時(shí)候，經(jīng)常會遇到并行開發(fā)的需求，會出現(xiàn)第一個(gè)需求接口轉(zhuǎn)發(fā)是一個(gè)地址，下一個(gè)需求接口轉(zhuǎn)發(fā)是一個(gè)地址，這時(shí)候如何解決呢？

第一種情況

前端也不申請多套環(huán)境。

本地開發(fā)時(shí)，多加個(gè)代理，比如叫api2，然后在當(dāng)前需求的接口前面使用這個(gè)。

但是會出現(xiàn)個(gè)問題，前端頁面加載后，只有涉及當(dāng)前需求的模塊接口是通的，其他模塊的接口報(bào)錯(cuò)（并不是說其他模塊有問題，其他模塊已提測），因?yàn)槟惚镜貑雍?，前端只有一套環(huán)境，但是后端有倆套環(huán)境，二者不一致。如果當(dāng)前需求的模塊數(shù)據(jù)依賴于之前模塊，那測試流程將無法走下去。

第二種情況

前端也申請倆套環(huán)境，配置相應(yīng)的nginx。一般都是由運(yùn)維配置，這樣前端按照之前開發(fā)模式來就可以了，無需多加代理，nginx會把當(dāng)前需求轉(zhuǎn)發(fā)到后端對應(yīng)的當(dāng)前接口環(huán)境上，其他模塊也不影響。

其實(shí)就是打包的時(shí)候 后端講代碼合并到之前需求代碼上了 這樣一致 就不用影響了

還有個(gè)問題，這種情況下，前端的啟動命令都是一樣 如果想?yún)^(qū)分不同環(huán)境下執(zhí)行不同命令來區(qū)分環(huán)境的話，如何實(shí)現(xiàn)？

vue.config里面添加讀取的代碼

package.jason里面這么寫

Vue設(shè)置本地代理

本地開發(fā)的時(shí)，在瀏覽器訪問項(xiàng)目的地址為 localhost， 但是當(dāng)我們需要對接第三方驗(yàn)證后又回到本地項(xiàng)目時(shí)，由于第三方的回跳地址為正式服的域名就會不成功。

這個(gè)時(shí)候就需要把域名映射到本地項(xiàng)目的地址，可以通過修改host文件實(shí)現(xiàn)。

本地安裝Whistle

w2 start

啟動后，添加rules：

/(?:https|http):\/\/griddev.jiuqi.com.cn/(.*)/ http://127.0.0.1:9898/$1

谷歌瀏覽器安裝Proxy SwitchyOmega擴(kuò)展

搜索 proxy switchyomega 添加

配置：

代理端口記得為： 8899，第一步中 Whistle 的默認(rèn)端口號， 如果修改了 Whistle 默認(rèn)端口號， 填修改后的。

瀏覽器操作

關(guān)鍵信息

選擇proxy， 但是選擇后 只有你第一步 rules 里面匹配到的域名能訪問了， 并且是轉(zhuǎn)到你配置的本地地址的。所以往第三方網(wǎng)站跳轉(zhuǎn)會不成功，像這樣：

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。