Vue中的axios请求设置BASE_URL

Vue中的axios请求设置BASE_URL

在Vue-cli中给axios请求设置BASEURL,使每次请求都可以使用 首先新建vue文件Global.vue (注意:最好是新建在和src同级目录下) 在Global.vue的script区域中书写如下内容:

const BASE_URL='http://172.0.0.000:××××(端口)'  //(此处书写需要复用的url,注意写上端口号)
export default(){
BASE_URL  //将定义的BASE_URL暴露出来
}

第二步,在main.js中引入文件并且设为全局引用

在main.js里面引入
import global_ from './Global'
Vue.prototype.GLOBAL=global_
axios.defaults.baseURL=global_.BASE_URL
在使用此方法之前,首先要确定安装了axios,并且如上面一样在main.js之中引入过了。 如果没有,需要安装引入。
通过npm安装axios的方法 确定安装了node,webback,vue-cli之后使用:
在terminal中输入
npm install axios --save-dev

安装完成之后在组件中使用axios的BASE_URL


var url = this.GLOBAL.BASE_URL+'/router'  //此处+后面的router是端口后面拼接的地址,接口不一样url不一样
this.$ajax.get(url,{
//此处是get请求的配置,如请求头中需要的token等
}).then(res=>{
alert('请求成功!')
window.location.href='http://www.baidu.com'     //请求成功之后跳转到新页面  (这里书写请求成功的操作)
}).catch(error=>{
alert('请求失败') //书写请求失败之后的操作内容
console.log(error)
})

你可能感兴趣的:(vue学习)