vue 在服務器端直接修改請求的接口地址
一個項目可能有很多環(huán)境,開發(fā),測試,預生產(chǎn),生產(chǎn)等環(huán)境,如果每一個環(huán)境都需要重新打包會顯得比較麻煩,那么如何解決這個問題呢
在vue和uniapp中以及其他框架下的都是可以按照如下操作來解決的
在靜態(tài)資源下新建一個env.json,vue項目是在public文件下新建,uniapp是在static下新建文件
文件格式如下
{ "name": "development", "base": "/customer" }
name,代表的是環(huán)境,方便直接在服務器上查看當前是什么環(huán)境的,base是請求的地址,如果服務器沒有做代理的話,這里的base應該是完整的請求地址http:// xxxxx.com/customer,類似這種
一般人在處理的時候總是獲取不到這個env.json里的地址,是因為,這里是因為異步導致的,如果要解決的話,可以在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') })
這樣有個問題就是一定是在請求這個json成功之后項目才會開始渲染的,這個時間可以做一個加載動畫,請求應該是很快的,如果請求失敗,你可以在axios里做一個catch操作,給一個友好的提示什么的,進行重新請求
那么如何獲取了?
可以在攔截器中進行獲取然后拼接請求地址
在攔截器的那個js文件中
function getBaseUrl() { return Vue.prototype.BASE_URL } 最后在傳入url的時候進行拼接,如下 url: getBaseUrl() + opts.url, // opts是傳過來的參數(shù)對象
就這樣就可以正常請求了
一般開發(fā)環(huán)境下你env.json里可以配置你的開發(fā)地址,最后通過自動化打包部署到服務器上去之后,如果要換成其他環(huán)境(測試,預生產(chǎn),生產(chǎn))的地址,可以直接在服務器上直接修改這個env.json文件即可,
大功告成,哈哈
以上就是vue 在服務器端直接修改請求的接口地址的詳細內(nèi)容,更多關于vue 修改請求接口地址的資料請關注腳本之家其它相關文章!
相關文章
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘i_發(fā)中,表格業(yè)務基本是必不可少的,對于老手來說確實簡單,家常便飯罷了,但是對于新手小白如何最快上手搞定需求呢?本文從思路開始著手,幫你快速搞定表格2022-11-11vue+relation-graph繪制關系圖實用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關系圖實用組件操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07使用webpack打包后的vue項目如何正確運行(express)
這篇文章主要介紹了使用webpack打包后的vue項目如何正確運行(express) ,接下來通過本文給大家詳細介紹,需要的朋友可以參考下2018-10-10elementplus el-table(行列互換)轉置的兩種方法
本文主要介紹了elementplus el-table(行列互換)轉置,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06如何使用vuejs實現(xiàn)更好的Form validation?
如何使用vuejs實現(xiàn)更好的Form validation?這篇文章主要介紹了vue-form插件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04Vue3系列之effect和ReactiveEffect?track?trigger源碼解析
這篇文章主要為大家介紹了Vue3系列之effect和ReactiveEffect?track?trigger源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10