快捷導(dǎo)航

vue 在服務(wù)器端直接修改請(qǐng)求的接口地址

更新時(shí)間：2020年12月19日 09:25:16 作者：火星黑洞

這篇文章主要介紹了vue 在服務(wù)器端直接修改請(qǐng)求的接口地址的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

一個(gè)項(xiàng)目可能有很多環(huán)境，開(kāi)發(fā)，測(cè)試，預(yù)生產(chǎn)，生產(chǎn)等環(huán)境，如果每一個(gè)環(huán)境都需要重新打包會(huì)顯得比較麻煩，那么如何解決這個(gè)問(wèn)題呢

在vue和uniapp中以及其他框架下的都是可以按照如下操作來(lái)解決的

在靜態(tài)資源下新建一個(gè)env.json,vue項(xiàng)目是在public文件下新建，uniapp是在static下新建文件

文件格式如下

{
  "name": "development",
  "base": "/customer"
}

name，代表的是環(huán)境，方便直接在服務(wù)器上查看當(dāng)前是什么環(huán)境的，base是請(qǐng)求的地址，如果服務(wù)器沒(méi)有做代理的話，這里的base應(yīng)該是完整的請(qǐng)求地址http:// xxxxx.com/customer，類似這種

一般人在處理的時(shí)候總是獲取不到這個(gè)env.json里的地址，是因?yàn)椋@里是因?yàn)楫惒綄?dǎo)致的，如果要解決的話，可以在main.js或者是main.ts中如何操作

axios.get('./env.json')
 .then(function (res: any) {
  // handle success
　　　　Vue.prototype.BASE_URL = res.data.base;
  new Vue({
   router,
   store,
   render: h => h(App)
  }).$mount('#app')
 })

這樣有個(gè)問(wèn)題就是一定是在請(qǐng)求這個(gè)json成功之后項(xiàng)目才會(huì)開(kāi)始渲染的，這個(gè)時(shí)間可以做一個(gè)加載動(dòng)畫，請(qǐng)求應(yīng)該是很快的，如果請(qǐng)求失敗，你可以在axios里做一個(gè)catch操作，給一個(gè)友好的提示什么的，進(jìn)行重新請(qǐng)求

那么如何獲取了？

可以在攔截器中進(jìn)行獲取然后拼接請(qǐng)求地址

在攔截器的那個(gè)js文件中

function getBaseUrl() {
  return Vue.prototype.BASE_URL
}

最后在傳入url的時(shí)候進(jìn)行拼接，如下
url: getBaseUrl() + opts.url, // opts是傳過(guò)來(lái)的參數(shù)對(duì)象

就這樣就可以正常請(qǐng)求了

一般開(kāi)發(fā)環(huán)境下你env.json里可以配置你的開(kāi)發(fā)地址，最后通過(guò)自動(dòng)化打包部署到服務(wù)器上去之后，如果要換成其他環(huán)境(測(cè)試，預(yù)生產(chǎn)，生產(chǎn))的地址,可以直接在服務(wù)器上直接修改這個(gè)env.json文件即可，

大功告成，哈哈

以上就是vue 在服務(wù)器端直接修改請(qǐng)求的接口地址的詳細(xì)內(nèi)容，更多關(guān)于vue 修改請(qǐng)求接口地址的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_(kāi)發(fā)中，表格業(yè)務(wù)基本是必不可少的，對(duì)于老手來(lái)說(shuō)確實(shí)簡(jiǎn)單，家常便飯罷了，但是對(duì)于新手小白如何最快上手搞定需求呢？本文從思路開(kāi)始著手，幫你快速搞定表格
2022-11-11
vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
使用webpack打包后的vue項(xiàng)目如何正確運(yùn)行（express）
這篇文章主要介紹了使用webpack打包后的vue項(xiàng)目如何正確運(yùn)行（express） ,接下來(lái)通過(guò)本文給大家詳細(xì)介紹，需要的朋友可以參考下
2018-10-10
vue在body和query中如何向后端傳參
這篇文章主要介紹了vue在body和query中如何向后端傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
elementplus el-table(行列互換)轉(zhuǎn)置的兩種方法
本文主要介紹了elementplus el-table(行列互換)轉(zhuǎn)置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-06-06
如何使用vuejs實(shí)現(xiàn)更好的Form validation?
如何使用vuejs實(shí)現(xiàn)更好的Form validation？這篇文章主要介紹了vue-form插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁(yè)面的例子
今天小編就為大家分享一篇vue設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁(yè)面的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue3系列之effect和ReactiveEffect?track?trigger源碼解析
這篇文章主要為大家介紹了Vue3系列之effect和ReactiveEffect?track?trigger源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
springboot+vue實(shí)現(xiàn)文件上傳下載
這篇文章主要為大家詳細(xì)介紹了springboot+vue實(shí)現(xiàn)文件上傳下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
vue.js加載新的內(nèi)容(實(shí)例代碼)
vue是一種輕巧便捷的框架，那么如何進(jìn)行對(duì)于數(shù)據(jù)加載的刷新呢？以下就是我對(duì)于vue.js數(shù)據(jù)加載的一點(diǎn)想法
2017-06-06