当前位置：首页 > VUE

vue实现接口配置

2026-02-18 08:29:03VUE

Vue 中实现接口配置的方法

使用 Axios 进行 HTTP 请求

安装 Axios 依赖：

npm install axios

创建 api.js 文件配置基础请求：

import axios from 'axios'

const service = axios.create({
  baseURL: 'https://your-api-domain.com/api',
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    // 请求拦截器
    config.headers['Authorization'] = 'Bearer ' + getToken()
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    // 响应拦截器
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

模块化接口管理

创建 userApi.js 示例：

import request from './api'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get'
  })
}

全局挂载 API

在 main.js 中：

import * as api from './api/userApi'
Vue.prototype.$api = api

组件中使用方式：

export default {
  methods: {
    async handleLogin() {
      try {
        const res = await this.$api.login({
          username: 'admin',
          password: '123456'
        })
        console.log(res)
      } catch (error) {
        console.error(error)
      }
    }
  }
}

环境变量配置

在项目根目录创建 .env.development：

VUE_APP_BASE_API = 'http://dev-api.example.com'

在 .env.production 中：

VUE_APP_BASE_API = 'https://api.example.com'

修改 api.js 配置：

baseURL: process.env.VUE_APP_BASE_API

TypeScript 支持

为接口添加类型定义：

vue实现接口配置

interface UserInfo {
  id: number
  name: string
  email: string
}

export function getUserInfo(): Promise<UserInfo> {
  return request({
    url: '/user/info',
    method: 'get'
  })
}