vue项目打包后可以配置接口地址的方法

因为项目测试的需要，我需要给测试人员一个项目的测试环境版本和生产环境版本，两个版本的区别就是请求的接口地址不一样而已，一开始，我是在webpack配置了不同的命令，让测试去打包，比如：使用npm run test 打包测试版本，使用npm run build打包生产环境的版本，可是测试嫌麻烦，说让弄成配置文件形式的 ，直接改配置文件就可以改接口地址的那种。

想了一阵子没想到方法，同事过来看了看说，，把接口地址挂载window全局对象下面不就行了，在同事 的点拨下，瞬间知道该咋做了，，好吧，是我想的太复杂了

简单的做法：

1.在项目根目录下的static文件夹下新建一个config.js（因为static文件夹下的东西在执行打包的时候会复制到打包后的目录里），在里边写：

window.serverAPI={

url:"http://www.xxx.com",
timeout:5000

}

2.在入口index.html 里 引入config.js

3.在项目中配置axios就可以这样：

let http = axios.create({
  baseURL: window.serverAPI.url,
  timeout: window.serverAPI.timeout
});

然后 测试 拿去用的话 就可以自己去改config.js里的url 来改接口地址啦

第二种方法(推荐)(20190530更新):

将接口配置成json  并将api.json文件放在static文件夹下:

{
  "onlineServer": {
    "enabled": "true",
    "name": "onlineServer",
    "api": "http://www.xxx.com"
  },
  "testServer": {
    "enabled": "false",
    "name": "testServer",
    "api": "http://xxx.xxx.xx.xx"
  }
}

上方是我定义的格式 ,onlineServer是线上接口的配置,testServer是测试服务器的配置,程序里边 通过enabled属性来判断使用哪个配置.

在vue入口文件 (一般就是main.js),先去获取 api.json ,获取到后再去实例化Vue,代码如下:

const loadApiConfig = new Promise((resolve, reject) => {
    let o = require('../static/api.json');
   if (o){
     resolve(o);
   }else {
     reject("api获取失败")
   }
  });

loadApiConfig.then(res=>{
  let apiConfig = {};
  for (let p in res) {
    if (res.hasOwnProperty(p)) {
      //判断 enabled 是true  就使用这个配置
      if (res[p].enabled === "true") {
        apiConfig = res[p];
      }
    }
  }
  console.log(apiConfig);
  console.log("获取api成功");

  //创建一个axios实例  配置刚刚获取的到api 地址等 参数  并挂载到Vue原型链上  在组件中就可以 用this.$http 去请求数据了
  Vue.prototype.$http = axios.create({
    baseURL: apiConfig.api,
    timeout: apiConfig.timeout,
    headers: {
      "Content-Type": "application/json"
    }
  });


  // 实例化vue
  new Vue({
    el: '#app',
    router,
    components: {App},
    template: '<App/>'
  });


}).catch(e =>{
  console.error(e)
})