这篇文章主要介绍“vue项目中怎么调用多个不同的ip接口”，在日常操作中，相信很多人在vue项目中怎么调用多个不同的ip接口问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue项目中怎么调用多个不同的ip接口”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
灵感来源：
项目的登录登出权限是调A的ip下面的接口,其他的功能调的接口是B的ip下面的接口
思路：
其实就是多写几个request.js文件罢了，或者在一个文件里面多写几个响应拦截和请求拦截.
上代码：
request.js
计算
安全
数据库
网络和加速
企业服务
import axios from 'axios'
import Vue from 'vue'
if(process.env.NODE_ENV == "development"){//开发环境
axios.defaults.baseURL = 'http://xxxxxx/air/';
}else if(process.env.NODE_ENV == "production"){
axios.defaults.baseURL = '/air/api'; // 生产环境
}
const service = axios.create({
timeout: 20000,
})
// 请求拦截
service.interceptors.request.use(
config => {
return config;
},
error => {
// 请求错误处理.......
}
)
// 响应拦截
service.interceptors.response.use(
response =>{
//响应结果处理.......
},
error => {
// 请求错误处理.......
}
)
export default servicerequestSec.js
import axios from 'axios'
import Vue from 'vue'
if(process.env.NODE_ENV == "development"){//开发环境
axios.defaults.baseURL = 'http://xxxxxx/air/';
}else if(process.env.NODE_ENV == "production"){
axios.defaults.baseURL = '/air/api'; // 生产环境
}
const sec = axios.create({
timeout: 20000,
})
// 请求拦截
sec.interceptors.request.use(
config => {
return config;
},
error => {
// 请求错误处理.......
}
)
// 响应拦截
sec.interceptors.response.use(
response =>{
//响应结果处理.......
},
error => {
// 请求错误处理.......
}
)
export default sec哎?你会发现这两个文件不是一样的吗,对,就是一样的,只不过是声明了两个请求拦截和响应拦截罢了.你也可以放到一个文件里面.都一样.
封装的接口文件
import axios from './request'
import sec from './requestSec'
// 登录
export function login(data) {
return sec({
method:'post',
url:'system/login',
data,
})
}
// 分页查询所有管辖区域
export function queryWithPageAll(params) {
return axios({
method:'get',
url:'area/queryAll',
params
})
}到这里就可以看出不一样了，如果要调用request里面ip下面的接口就return axios 如果要调用requestSec里面ip下面的接口就return sec
其他就是正常的了，哪个页面调用就正常调用就可以了.
在文件夹下新建baseServerConfig.js
module.exports = {
// 本地环境设置 测试接口的地址
"localhost:8010": {
mallUrl: 'http://202.108.22.5:8000',
storeHouseUrl: 'http://202.108.22.103:8080',
},
// 本地IP环境设置 测试接口的地址
"10.12.5.46:8010": {
mallUrl: 'http://202.108.22.5:8000',
storeHouseUrl: 'http://202.108.22.103:8080',
},
// 测试环境设置 测试接口的地址
"22.81.24.60:8080": {
mallUrl: 'http://202.108.22.5:8000',
storeHouseUrl: 'http://202.108.22.103:8080',
},
// UAT环境设置 UAT接口地址
"uat.baidu.com": {
mallUrl: 'http://uat.baidu.com',
storeHouseUrl: 'http://uat-init.baidu.com'
},
//生产环境设置 生产接口地址
"www.baidu.com": {
mallUrl: 'http://www.baidu.com',
storeHouseUrl: 'http://init.baidu.com'
}
}引入baseServerConfig，用变量接收当前的环境 对应的接口地址，把这个变量放入Vue的原型的属性上
import baseServer from '../configenv/baseServerConfig'
const mallUrl= baseServer[location.host].mallUrl
const storeHouseUrl= baseServer[location.host].storeHouseUrl
Vue.prototype.mallUrl= mallUrl;//商城地址
Vue.prototype.storeHouseUrl= storeHouseUrl;//仓库地址this.$http.get(this.mallUrl+"/api/a/b/c").then(resp =>{
// 写逻辑
}）
this.$http.get(this.storeHouseUrl+"/api/abc/b/c").then(resp =>{
// 写逻辑
}）小结：这样就实现了当前环境 与 不同环境接口相互绑定，避免人员重复的切换接口环境。
从而实现了npm run build 一个包既可以放在测试环境、UAT环境和生产环境
到此，关于“vue项目中怎么调用多个不同的ip接口”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
