配置服務(wù)器訪問(wèn)接口地址需要考慮三種環(huán)境下的配置：分別是：
1.本地環(huán)境---即執(zhí)行npm run dev 的環(huán)境
2.測(cè)試環(huán)境---即打包發(fā)布到測(cè)試服務(wù)器的環(huán)境--一般執(zhí)行npm run build
3.生產(chǎn)環(huán)境---即打包部署到線上服務(wù)器的環(huán)境---一般執(zhí)行npm run publish
本地環(huán)境：
如下圖：本地環(huán)境中config的index.js文件中配置代理服務(wù)器闷供，所謂代理服務(wù)器粟关，顧名思義会钝，使用一個(gè)字符串將下面一行url地址代替（此配置只適用于本地環(huán)境）
上圖設(shè)置了3個(gè)代理服務(wù)器向臀，分別使用/api /wgfw /dlfw
代理了三個(gè)服務(wù)器項(xiàng)目地址
接著，配置axios請(qǐng)求文件
'use strict'
import axios from "axios"
import Const from "./const"
// 創(chuàng)建一個(gè)axios的對(duì)象
// application/x-www-form-urlencoded;charset=utf-8
const Axios = axios.create({
baseURL: "",//這里不能使用前綴架谎，因?yàn)槿猪?xiàng)目不一定會(huì)訪問(wèn)一個(gè)域名
method: 'post',
apiType: '',
timeout: 10000,
responseType: "json",
withCredentials: true, // 是否允許帶cookie這些
headers: {
"Content-Type": "text/plain"
}
});
//添加請(qǐng)求攔截器,在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們炸宵。
Axios.interceptors.request.use(
config => {
// 在發(fā)送請(qǐng)求之前做某件事
//1.判斷是否需要添加默認(rèn)域名
if (config.apiType === '1') {
config.baseURL = Const.micro_base_url;
} else
if (config.apiType === '2') {
config.baseURL = Const.gateway_base_url;
} else {
config.baseURL = Const.spa_base_http;
}
return config;
},
error => {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么,可以抓取錯(cuò)誤日志
console.log();
return Promise.reject(error.data.error.message);
}
);
//返回狀態(tài)判斷(添加響應(yīng)攔截器)
Axios.interceptors.response.use(
res => {
//對(duì)響應(yīng)數(shù)據(jù)做些事
return res.data;
},
error => {
console.log(error);
return Promise.reject(error);
}
);
// 對(duì)axios的實(shí)例重新封裝成一個(gè)plugin ,方便 Vue.use(xxxx)
export default {
install: function (Vue, Option) {
//使用Object.defineProperty為Vue綁定屬性，且不可被修改
Object.defineProperty(Vue.prototype, "$http", { value: Axios });
}
};
如上代碼 先是對(duì)請(qǐng)求參數(shù)進(jìn)行配置谷扣，接著添加請(qǐng)求攔截器土全，這里根據(jù)上面設(shè)置的一個(gè)apiType 參數(shù)對(duì)不同請(qǐng)求類型進(jìn)行特殊處理（當(dāng)前項(xiàng)目使用此參數(shù)判斷使用哪個(gè)后端服務(wù)項(xiàng)目），并在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們
最后会涎，將此調(diào)用服務(wù)的方法名稱綁定為$http*
PS:
上述在判斷apiType 的之后裹匙，引用了自己配置的const參數(shù)js
在此文件中，會(huì)根據(jù)當(dāng)前環(huán)境給參數(shù)不同的值
主要code如下：
//spa服務(wù)器訪問(wèn)地址
let SERVER_BASE_URL;
let MICRO_BASE_URL;
let GATEWAY_BASE_URL;
switch (process.env.NODE_ENV) {
case 'development':
SERVER_BASE_URL = '/api';
MICRO_BASE_URL = '/dlfw';
GATEWAY_BASE_URL = '/wgfw';
break
case 'testing':
SERVER_BASE_URL = '/aaa';
MICRO_BASE_URL = 'http://test-xxx.com/xxxxx';
GATEWAY_BASE_URL = 'http://test-api-xxx.com/xxx';
break
case 'production':
SERVER_BASE_URL = '/aaa';
MICRO_BASE_URL = 'http://xxx.com/xxxxx';
GATEWAY_BASE_URL = 'http://api-xxx.com/xxx';
break
default:
break
}
export default {
spa_base_http:SERVER_BASE_URL,
micro_base_url: MICRO_BASE_URL,
gateway_base_url: GATEWAY_BASE_URL
}
在main.js中調(diào)用此文件末秃，接著在vue頁(yè)面中即可根據(jù)需要請(qǐng)求服務(wù)
initInfo: function(type) {
var _this = this;
// 調(diào)服務(wù)
_this
.$http({
apiType: '1',
url: "/hongbaoyu/init?accessToken=" + localStorage.getItem("userToken"),
data: {
}
})
.then(res => {
console.log(res);
let data = res.result || {};
if (res.reCode === "0") {
// 通過(guò)
} else {
_this.pwdHint = "請(qǐng)求超時(shí),請(qǐng)稍后再試";
}
})
.catch(e => {
console.log(e);
});
},
最后說(shuō)明：
apiType參數(shù)是根據(jù)vue頁(yè)面不同的傳值請(qǐng)求不同域名服務(wù)器接口概页，而const中的switch則是根據(jù)不同運(yùn)行環(huán)境，確定服務(wù)器接口url
