Vue-全局配置axios_vue全局配置axios

Vue-全局配置axios

1.安装axios

​ npm i axios

2.在main.js 引入axios

​ import axios from ‘axios’

3.全局配置axios的请求根路径

​ axios.defaults.baseURL = ‘http://域名:端口’;

根路径即为每个组件请求路径相同的部分。

4.挂载axios对象

​ Vue.prototype.$http = axios;

把 axios 挂载到 Vue.prototype 上，这样每个组件不必再自己引入axios，也不需要写完整的地址。

5.main.js代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios';

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://www.liulongbin.top:3006';
Vue.prototype.$http = axios;
//$http可以自己随便起名字
new Vue({
  router:router,//可简写成router(因为键和值是一样的)
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

6.在组件中使用全局axios

let params = {
	...
}
let url = '/Personnel/InfoPage'
this.$http.post(url, params).then((res) => {
	...
})
1
2
3
4
5
6
7