一個(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 successVue.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)注好吧啦網(wǎng)其它相關(guān)文章！