vue3不同環(huán)境下實(shí)現(xiàn)配置代理
不同環(huán)境下如何配置代理
實(shí)際開(kāi)發(fā)的時(shí)候,經(jīng)常會(huì)遇到并行開(kāi)發(fā)的需求,會(huì)出現(xiàn)第一個(gè)需求接口轉(zhuǎn)發(fā)是一個(gè)地址,下一個(gè)需求接口轉(zhuǎn)發(fā)是一個(gè)地址,這時(shí)候如何解決呢?
第一種情況
前端也不申請(qǐng)多套環(huán)境。
本地開(kāi)發(fā)時(shí),多加個(gè)代理,比如叫api2,然后在當(dāng)前需求的接口前面使用這個(gè)。
但是會(huì)出現(xiàn)個(gè)問(wèn)題,前端頁(yè)面加載后,只有涉及當(dāng)前需求的模塊接口是通的,其他模塊的接口報(bào)錯(cuò)(并不是說(shuō)其他模塊有問(wèn)題,其他模塊已提測(cè)),因?yàn)槟惚镜貑?dòng)后,前端只有一套環(huán)境,但是后端有倆套環(huán)境,二者不一致。如果當(dāng)前需求的模塊數(shù)據(jù)依賴(lài)于之前模塊,那測(cè)試流程將無(wú)法走下去。
第二種情況
前端也申請(qǐng)倆套環(huán)境,配置相應(yīng)的nginx。一般都是由運(yùn)維配置,這樣前端按照之前開(kāi)發(fā)模式來(lái)就可以了,無(wú)需多加代理,nginx會(huì)把當(dāng)前需求轉(zhuǎn)發(fā)到后端對(duì)應(yīng)的當(dāng)前接口環(huán)境上,其他模塊也不影響。
其實(shí)就是打包的時(shí)候 后端講代碼合并到之前需求代碼上了 這樣一致 就不用影響了
還有個(gè)問(wèn)題,這種情況下,前端的啟動(dòng)命令都是一樣 如果想?yún)^(qū)分不同環(huán)境下執(zhí)行不同命令來(lái)區(qū)分環(huán)境的話,如何實(shí)現(xiàn)?
vue.config里面添加讀取的代碼
package.jason里面這么寫(xiě)
Vue設(shè)置本地代理
本地開(kāi)發(fā)的時(shí),在瀏覽器訪問(wèn)項(xiàng)目的地址為 localhost, 但是當(dāng)我們需要對(duì)接第三方驗(yàn)證后又回到本地項(xiàng)目時(shí),由于第三方的回跳地址為正式服的域名就會(huì)不成功。
這個(gè)時(shí)候就需要把域名映射到本地項(xiàng)目的地址,可以通過(guò)修改host文件實(shí)現(xiàn)。
本地安裝Whistle
w2 start
啟動(dòng)后,添加rules:
/(?:https|http):\/\/griddev.jiuqi.com.cn/(.*)/ http://127.0.0.1:9898/$1
谷歌瀏覽器安裝Proxy SwitchyOmega擴(kuò)展
搜索 proxy switchyomega 添加
配置:
代理端口記得為: 8899,第一步中 Whistle 的默認(rèn)端口號(hào), 如果修改了 Whistle 默認(rèn)端口號(hào), 填修改后的。
瀏覽器操作
關(guān)鍵信息
選擇proxy, 但是選擇后 只有你第一步 rules 里面匹配到的域名能訪問(wèn)了, 并且是轉(zhuǎn)到你配置的本地地址的。所以往第三方網(wǎng)站跳轉(zhuǎn)會(huì)不成功,像這樣:
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法
兩組件間傳值,可能包含多種情況,這篇文章主要介紹了vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)
這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問(wèn)題及解決
這篇文章主要介紹了Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Element實(shí)現(xiàn)動(dòng)態(tài)表格的示例代碼
最近有有個(gè)項(xiàng)目,通過(guò)選擇不同的查詢(xún)指標(biāo)展示不同的表格,所以本文就介紹一下Element實(shí)現(xiàn)動(dòng)態(tài)表格,具體實(shí)現(xiàn)代碼記錄如下,感興趣的可以了解一下2021-08-08Vue終端取消vue、prettier警告warn問(wèn)題
這篇文章主要介紹了Vue終端取消vue、prettier警告warn問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue實(shí)現(xiàn)搜索 和新聞列表功能簡(jiǎn)單范例
本文通過(guò)實(shí)例代碼給大家介紹了Vue實(shí)現(xiàn)搜索 和新聞列表功能簡(jiǎn)單范例,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2018-03-03