Vue——设置自动配置不同环境接口

1. 再根目录新建一个文件夹configenv, 在文件夹下新建baseServerConfig.js

module.exports = {
  // 本地环境设置 测试接口的地址
  "localhost:8010": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // 本地IP环境设置 测试接口的地址
  "10.12.5.46:8010": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // 测试环境设置 测试接口的地址
  "22.81.24.60:8080": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // UAT环境设置 UAT接口地址
  "uat.baidu.com": {
    mallUrl: 'http://uat.baidu.com',
    storeHouseUrl: 'http://uat-init.baidu.com' 
  },
    //生产环境设置 生产接口地址
  "www.baidu.com": {
    mallUrl: 'http://www.baidu.com',
    storeHouseUrl: 'http://init.baidu.com' 
  }
}

2.在main.js 入口文件中，引入baseServerConfig，用变量接收当前的环境 对应的接口地址，把这个变量放入Vue的原型的属性上

import baseServer from '../configenv/baseServerConfig'
const mallUrl= baseServer[location.host].mallUrl
const storeHouseUrl= baseServer[location.host].storeHouseUrl

Vue.prototype.mallUrl= mallUrl;//商城地址
Vue.prototype.storeHouseUrl= storeHouseUrl;//仓库地址

3. 在实际Vue页面中，接口实际调用

this.$http.get(this.mallUrl+"/api/a/b/c").then(resp =>{
	// 写逻辑
}）

this.$http.get(this.storeHouseUrl+"/api/abc/b/c").then(resp =>{
	// 写逻辑
}）

4. 总结
   这样就实现了当前环境 与 不同环境接口相互绑定，避免人员重复的切换接口环境。
   从而实现了npm run build 一个包既可以放在测试环境、UAT环境和生产环境