1. 根据不同环境配置 请求

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import { Notification } from 'element-ui'
import auth from './auth'
Vue.prototype.$http = axios
Vue.prototype.qs = qs
Vue.prototype.auth = auth

// axios.defaults.withCredentials = true
// axios.defaults.timeout = 1000 * 10

let baseUrl = ''
switch (process.env.NODE_ENV) {
  case 'development':
    baseUrl = 'http://192.168.200.221:8090' // 开发 环境 url
    break
  case 'test':
    baseUrl = 'http://192.168.200.184:8090' // 测试 环境中 url
    break
  case 'production':
    baseUrl = 'http://terminal.shairport.com'// 生产环境url
    break
  case 'pre':
    baseUrl = 'https://192.168.200.113'// pre 环境url
    break
  case 'linshi':
    baseUrl = 'http://10.10.12.35:8090'// 临时环境
    break
}
Vue.prototype.houTaiUrl = houTaiUrl
Vue.prototype.publicKey = publicKey

axios.defaults.baseURL = baseUrl

// 1. 请求拦截器
axios.interceptors.request.use((config) => {
  config.headers.platform = 'PC'
  if (auth.getToken()) {
    config.headers.Authorization = auth.getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, function(err) {
  return Promise.reject(err)
})
// 2. 响应拦截器
axios.interceptors.response.use((res) => {
  const status = res.status
  if (status !== 200) {
    Notification.error({
      title: res.data.msg
    })
    return Promise.reject(new Error('errorMsg'))
  } else {
    return res
  }
},
(err) => {
  Notification.error({
    title: '网络异常，请联系管理员！'
  })
  return Promise.reject(err)
})

export default axios

2.配置不同的环境

- 在src根目录下创建.env文件

- package.json 里面配置命令

    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "build-test": "vue-cli-service build --mode test",
      "build-pre": "vue-cli-service build --mode pre",
      "build-linshi": "vue-cli-service build --mode linshi",
      "build-dev": "vue-cli-service build --mode development"
    },
    用法： npm run build-test    就是打包测试环境
    
    "dependencies": {
      "axios": "^0.19.0",
      "core-js": "^3.6.4",
      "echarts": "^4.6.0",
      "element-ui": "^2.13.2",
      "file-saver": "^2.0.2",
      "html2canvas": "^1.0.0-rc.5",
      "js-cookie": "^2.2.1",
      "jsencrypt": "^3.0.0-rc.1",
      "moment": "^2.26.0",
      "qs": "^6.9.1",
      "v-charts": "^1.19.0",
      "vue": "^2.6.11",
      "vue-quill-editor": "^3.0.6",
      "vue-router": "^3.1.5",
      "vuex": "^3.1.2",
      "xlsx": "^0.16.0"
    },
    上面的qs 是序列化数组的第三方插件