vue环境以及axios配置

首先在根目录创建环境文件

不同的服务、不同的前缀、这里只以需要token的接口以及不需要的接口为例子

// .env.production
# 生产环境配置
ENV = 'prod'
# 用户服务
VUE_APP_PROPERTY_SERVER = 'http://pj.xxxx.com.cn/property-server/api'
# 登录服务
VUE_APP_USER_SERVER = 'http://pj.xxxx.com.cn/user-server/api'

// .env.staging
# 测试环境配置
ENV = 'dev'
# 用户服务
VUE_APP_PROPERTY_SERVER = 'http://pj.xxxx.com.cn/t/property-server/api'
# 登录服务
VUE_APP_USER_SERVER = 'http://pj.xxxx.com.cn/t/user-server/api'

package.json 文件配置不同的打包命令

"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve --mode development-yxt",
    "build": "vue-cli-service build --mode production",
    "build:stage": "vue-cli-service build --mode staging"
  },

utils下建request.js 文件

import axios from 'axios'
import { Toast } from 'vant'
import { getToken, removeToken } from '@/utils/token' // js-cookie 插件

// 创建请求拦截器（这样的方式可以的好处是哪些服务需要拦截可以自定义）
const requestInterceptor = function (config, error) {
  let token = sessionStorage.getItem('token')
  if (token === null) {
    token = getToken()
  }
  if (token) {
    config.headers.ZkPlatformToken = token //如果要求携带在请求头中
  }
  return config
}

// 用户配置服务
export const propertyServer = axios.create({
  baseURL: process.env.VUE_APP_PROPERTY_SERVER,
  timeout: 10000 // request timeout
})
propertyServer.interceptors.request.use(requestInterceptor)

// 登录相关配置服务
export const userServer = axios.create({
  baseURL: process.env.VUE_APP_USER_SERVER,
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 10000 // request timeout
})

// 全局 response interceptor
propertyServer.interceptors.response.use(
  response => {
    if (response.data.code && response.data.code !== 0) {
      switch (response.data.code) {
        case 500101:
          Toast.fail(response.data.msg)
          removeToken()
          break
        default:
          Toast.fail(response.data.msg)
      }
      return Promise.reject(new Error(response.data.msg || 'Error'))
    } else {
      return response
    }
  },
  error => {
    console.log(error)
    if (error.response.status) {
      switch (error.response.status) {
        case 500:
          Toast.fail('服务器异常')
          break
        // 404请求不存在
        case 404:
          Toast.fail('网络请求不存在')
          break
        // 404请求不存在
        case 502:
          Toast.fail('网络维护中')
          break
          // 其他错误，直接抛出错误提示
        default:
          Toast.fail(error.response.data.msg)
      }
      return Promise.reject(error.response)
    }
    return Promise.reject(error)
  }
)
     

src下创建api文件夹、以及index.js和xxx.js各类域接口

index.js 写以下代码

const files = require.context('./', true, /\.js$/)
let api = new Map()
files.keys().forEach(file => {
  const fileKey = file.replace(/\.\/|\.js/g, '')
  if (fileKey !== 'index') {
    api = Object.assign(api, files(file))
  }
})
export default api;

home.js写一下代码

import { propertyServer, userServer } from '@/utils/request'

export const getList = params => userServer.get(`api/report/getList`, { params: params })

export const listAgency = params => propertyServer.get(`/task/listAgency`, { params: params })

页面调用

import API from "@/api";

async getList() {
  try {
    let res = await API.getList();
    this.list = res.data.data;
  } else {
      Toast.fail(res.data.msg);
  }
}