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

Daming 2018-08-12
2条评论 2,690 次浏览
Daming 2018-08-122条评论 2,690 次浏览

因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在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)
})

3+

vue项目打包后可以配置接口地址的方法” 有 2 条评论

发表评论

电子邮件地址不会被公开。