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

});

}).catch(e =>{

console.error(e)

})

3+

1.如需转载本站原创文章，请务必注明文章出处并附上链接，非常感谢。

2.本站用于记录个人 工作、学习、生活，非商业网站，更多信息请 点击这里

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

我的config/index.js里面有一个地址，那个地方需不需要进行修改

0

什么地址,,,

0

发表评论电子邮件地址不会被公开。

评论

姓名

电子邮件

站点