当前位置：首页 > VUE

vue实现接口配置

2026-01-17 15:58:01VUE

Vue 中实现接口配置的方法

在 Vue 项目中配置接口通常涉及以下几个关键步骤：

创建 API 配置文件

新建一个 api 目录，创建 index.js 文件作为接口配置入口。可以将接口按模块分类，例如：

// api/index.js
import user from './user'
import product from './product'

export default {
  user,
  product
}

配置 Axios 实例

创建 axios 实例并设置基础配置：

// utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 添加 token 等操作
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

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

export default service

定义具体接口

在模块文件中定义具体接口：

vue实现接口配置

// api/user.js
import request from '../utils/request'

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

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

环境变量配置

在项目根目录创建 .env 文件：

# .env.development
VUE_APP_BASE_API = '/api'

使用接口

在 Vue 组件中调用接口：

vue实现接口配置

import { login } from '@/api/user'

export default {
  methods: {
    handleLogin() {
      login(this.loginForm).then(res => {
        // 处理响应
      })
    }
  }
}

跨域处理

开发环境下配置代理：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://real-api-domain.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

接口 Mock

可以使用 mockjs 进行接口模拟：

// mock/user.js
import Mock from 'mockjs'

Mock.mock('/api/user/login', 'post', {
  code: 200,
  data: {
    token: 'mock-token'
  }
})

类型支持（TypeScript）

为接口添加类型定义：

// types/api.d.ts
declare interface LoginParams {
  username: string
  password: string
}

declare interface UserInfo {
  name: string
  avatar: string
  roles: string[]
}

这种结构化的接口配置方式使项目更易维护，各模块职责清晰，便于团队协作开发。