vue axos在main.js文件中配置根路径及url的全局请求

「已注销」

于 2021-10-14 22:26:59 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_46813809/article/details/120773763

本文介绍了如何在Vue.js应用的main.js文件中设置Axios的全局配置，使得子组件可以方便地使用this.$http进行API调用。通过设置Vue.prototype.$http为axios实例，子组件无需引入axios即可直接调用。同时，演示了如何配置axios的默认基路径，以简化URL地址，避免在每个组件中重复修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios配置全局路径

在main.js中使用vue构造函数设置axios的配置，再由子组件不需要引入的情况下直接使用。

main.js文件中

//首先在main.js中导入axios模块
import axios from 'axios' 
//使用vue构造函数指向axios模块，并由$http接受，
//在其他组件中直接使用this.$http.post/get等调用
//配置axios的全局设置
vue.prototype.$http = axios

子组件中

 methods: {
    async foo() {
      const { data: res } = await this.$http.get('请求地址')
      console.log(res)
   }
}

main.js配置axios根路径的简写

配置axios的根路径，再修改url地址的时候自动匹配到端口，不用程序员再每个vue组件中依次修改。

import axios from 'axios'
//配置默认的url请求路径，可以直接修改，子组件直接调用
vue.defaults.baseURL = 'https://id地址:端口号'
//配置axios的全局设置
vue.prototype.$http = axios

子组件中

methods: {
    async foo() {
      const { data: res } = await this.$http.get('/api/hu')
      console.log(res)
    }
  }