vue项目中的axios配置与api模块化管理

vue项目中的axios配置与api模块化管理

1.目录结构：在src目录下新建apis文件夹，用于配置项目中的api接口

2.配置开发环境与生产环境的请求根路径baseUrl

config.js

// 生产环境
const prodConfigs = {
   
  apiHost: 'http://localhost:8000',
  staticHost: ''
}
// 开发环境
const localConfig = {
   
  apiHost: 'http://localhost:4000',
  staticHost: ''
}

let hostConfig = prodConfigs[location.hostname]
if (process.env.NODE_ENV === 'development') hostConfig = localConfig
window.loginUrl = location.hostname

export default hostConfig.apiHost
// 这里导出的就是 请求的baseUrl

3.配置axios

setup.js

// 封装的所有网络请求
import axios from 'axios'
import baseURL from './config.js'

// 正式环境 -- 请使用真实请求 -- start
const instance = axios.create({
   
  // 设置超时时间 -30秒
  timeout: 30000,
  // 请求的baseUrl
  baseURL: process.env.NODE_ENV === 'development' ? '/api' : baseURL,
  // 请求头部信息
  headers: {
   
    'Content-Type':