Vue项目Axios配置不同baseUrl，请求不同服务器的接口

项目需求

最近使用 Vue 开发后台管理系统项目,开发过程遇到一个特别闹心的事情，由于项目没有上线,所有接口地址都是后台人员的电脑做为服务器，这个项目有几个后台同时开发接口，每一个大模块对应的接口地址不一样。这样按照常规写接口地址，只能调用一个模块，这样很不方便，也不符合前端的设计理念

下面我们就封装一个可以调用不同服务器的方法

第一步、新建一个serviceList.js文件 /src/config/service.js

const servicesList = {
  dev: {
    commonUpload: { url: 'http://192.168.1.195', port: 10060 }, // 上传文件
    commonAuth: { url: 'http://192.168.1.32', port: 8777 }, // 用户登录授权
    accountRole: { url: 'http://192.168.1.117', port: 8660 }, // 账户管理-角色、权限
    financialBill: { url: 'http://192.168.1.155', port: 8805 }, // 票据管理
    financialBuildProject: { url: 'http://192.168.1.158', port: 8800 }, // 在建工程
    financialCashBank: { url: 'http://192.168.1.155', port: 8816 }, // 现金银行
    financialCost: { url: 'http://192.168.1.32', port: 8817 }, // 成本费用
  },
  test: {},
  production: {}
}

export default servicesList

第二步、新建一个config.js文件（跟main.js同一级目录）

import servicesList from './config/servicesList'

// 发布版本
const bundleVersion = '20191024'

// 环境模式 dev test production
const environment = 'dev'

// api默认地址
const baseUrl = {
  dev: 'http://192.168.1.18',
  test: 'http://192.168.1.195',
  production: ''
}

// 服务接口地址
const services = {
  dev: (() => {
    return servicesList.dev
  })(),
  test: (() => {
    let list = JSON.parse(JSON.stringify(servicesList.dev))
    for (let name in list) {
      list[name].url = baseUrl[environment]
    }
    return list
  })(),
  production: (() => {
    let list = JSON.parse(JSON.stringify(servicesList.dev))
    for (let name in list) {
      list[name].url = baseUrl[environment]
    }
    return list
  })()
}

export default {
  version: bundleVersion,
  apiUrl: baseUrl[environment],
  apiConfig: services[environment],
  netPrefix
}

第三步、新建封装各种调用接口api的文件

新建api文件夹
里面是各个模块的文件夹
api文件夹下有一个index.js

这边就写个模块的例子，在这js里面调用config.js里面引用的地址
account/index.js

import http from '../../services/http'
import config from '../../config'

// 账户管理 - 角色管理

// 调用服务
const services = config.apiConfig.accountRole
// body实体
let servicesRaw = JSON.parse(JSON.stringify(services))
servicesRaw.raw = true

const account = {
  // 账户管理 - SURMAX - 列表
  getSurmaxList: params => {
    return http.get(
      'userAccount/userAccount/userAccountListSearch',
      params,
      services
    )
  },
  // 账户管理 - SURMAX - 新增
  surmaxAccountAdd: params => {
    return http.post(
      'userAccount/userAccount/userAccountAdd',
      params,
      servicesRaw
    )
  }
}

export default account

引入的http.js是对axios请求的拦截封装处理

api/index.js

import account from './account/index' // 账户管理
import financial from './financial/index' // 财务管理

export {
  account,
  financial
}

第四步、在mian.js引用api

import Vue from 'vue'
import App from './App'
import router from './router'
import * as Api from './api'
import components from '@/components/index'

// api接口
Vue.prototype.api = Api

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

写到这里，基本封装就完成，剩最后调用接口了

第五步、在页面中调用

在vue页面中

/**
   * 调用账户管理-列表
 **/
 getListDeal (params) {
   let vm = this
   vm.api.account.getSurmaxList(params).then(res => {
     vm.$set(vm.listData, 'data', res.itemList)
     let pages = {
       pageIndex: res.pageIndex,
       totalNumber: res.totalNumber,
       totalPage: res.totalPage
     }
     vm.pages = pages
     
   }, err => {
     unit.msg.error({ vm, content: err })
   })
 },

总结

优点:
1,在不同的组件调用不同的方法就可以实现,不同的接口请求数据;
2,维护接口方便,以后上线之后,把config.js中的环境换成线上接口即可;