vue 在服務器端直接修改請求的接口地址
一個項目可能有很多環(huán)境，開發(fā)，測試，預生產，生產等環(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是傳過來的參數對象
就這樣就可以正常請求了
一般開發(fā)環(huán)境下你env.json里可以配置你的開發(fā)地址，最后通過自動化打包部署到服務器上去之后，如果要換成其他環(huán)境(測試，預生產，生產)的地址,可以直接在服務器上直接修改這個env.json文件即可，
大功告成，哈哈
以上就是vue 在服務器端直接修改請求的接口地址的詳細內容，更多關于vue 修改請求接口地址的資料請關注腳本之家其它相關文章！
相關文章
vue百度地圖通過地址名稱獲取地址的經緯度gps問題(具體步驟)
在Vue項目中，可以通過使用百度地圖JavaScript?API來實現根據地址名稱獲取經緯度GPS的功能，本文分步驟給大家詳細講解vue百度地圖獲取經緯度的實例，感興趣的朋友一起看看吧2023-05-05
vue中的v-show,v-if,v-bind的使用示例詳解
這篇文章主要介紹了vue中的v-show,v-if,v-bind的使用,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue-admin-template?添加、跳轉子頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了VUE實現密碼驗證與提示功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了Vue拖拽組件列表實現動態(tài)頁面配置功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要給大家介紹了關于VUE如何利用vue-print-nb實現打印功能的相關資料,文中還給大家介紹了vue-print-nb使用中的常見問題，如空白頁,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue 事件的$event參數=事件的值案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
本篇主要介紹了vue-cli 接口代理配置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue.js實現數據動態(tài)響應 Vue.set的簡單應用
這篇文章主要介紹了vue.js實現數據動態(tài)響應，Vue.set的簡單應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vue歌曲進度條demo，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10