vue项目静态资源中配置接口地址

开发过程中，端口变动十分常见，测试和上线后的后端接口大部分就不同，所以将接口地址放到配置文件中是必不可少的。

一、在静态文件夹中新建 config.json文件，文件中存放接口地址等地址配置信息。

例：

{
  "axios": {
    "baseUrl": {
      "desc": "说明：后端数据接口基地址",
      "value": "http://****.232:30001/api/"
    },
    "ssoUrl": {
      "desc": "说明：token获取地址",
      "value": "http://****.232:30100"
    },
    "timeout": {
      "desc": "axios 请求超时（单位：毫秒）",
      "value": 300000
    }
  }，
  "imageBase": {
    "desc": "图片存放（使用）地址",
    "value": "http://****.232:30800/"
  }
}

二、新建js文件，通过请求的方式获取config.json文件的接口地址。

// 定义配置变量
let config

// 定义同步获取json文件数据方法
let syncGetJsonData = function (url) {
  let xhr = new XMLHttpRequest()
  xhr.open('get', url, false)
  xhr.send()
  return JSON.parse(xhr.responseText)
}


config = syncGetJsonData('./../config/config.json?r=' + Math.random())

export default config

三、此时就可以直接利用js输出的config同步获取接口地址等配置信息了，继而利用axios进行封装请求。

/**
 * 功能说明：axios配置
 * 更新说明：新建
 */

import axios from 'axios'
import config from '../../src/utils/sync-config'
import rnopJs from 'rnop-js'

// 配置请求超时时间
axios.defaults.timeout = config.axios.timeout.value
// 配置axios基本请求地址
axios.defaults.baseURL = config.axios.baseUrl.value
// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 请求之前执行，携带token
  config.headers.sso_token = rnopJs.token.getToken()
  return config
}, function (error) {
  // 请求发生错误时执行
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(function (response) {
  // 可对响应response做一些操作
  return response
}, function (error) {
  // 响应发生异常时触发
  return Promise.reject(error)
})

export default axios

之后的接口根路径变动均可以从config.json中改变，无需重新打包。

下面是我项目的各文件位置，截图给大家借鉴一下，方便理解各个import