vue 在服務器端直接修改請求的接口地址
一個項目可能有很多環境,開發,測試,預生產,生產等環境,如果每一個環境都需要重新打包會顯得比較麻煩,那么如何解決這個問題呢
在vue和uniapp中以及其他框架下的都是可以按照如下操作來解決的
在靜態資源下新建一個env.json,vue項目是在public文件下新建,uniapp是在static下新建文件
文件格式如下
{ 'name': 'development', 'base': '/customer'}
name,代表的是環境,方便直接在服務器上查看當前是什么環境的,base是請求的地址,如果服務器沒有做代理的話,這里的base應該是完整的請求地址http:// xxxxx.com/customer,類似這種
一般人在處理的時候總是獲取不到這個env.json里的地址,是因為,這里是因為異步導致的,如果要解決的話,可以在main.js或者是main.ts中如何操作
axios.get(’./env.json’) .then(function (res: any) { // handle successVue.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是傳過來的參數對象
就這樣就可以正常請求了
一般開發環境下你env.json里可以配置你的開發地址,最后通過自動化打包部署到服務器上去之后,如果要換成其他環境(測試,預生產,生產)的地址,可以直接在服務器上直接修改這個env.json文件即可,
大功告成,哈哈
以上就是vue 在服務器端直接修改請求的接口地址的詳細內容,更多關于vue 修改請求接口地址的資料請關注好吧啦網其它相關文章!
相關文章: