vue项目接口地址暴露_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: ''
});
}).catch(e =>{
console.error(e)
})
3+
1.如需转载本站原创文章，请务必注明文章出处并附上链接，非常感谢。
2.本站用于记录个人 工作、学习、生活，非商业网站，更多信息请 点击这里
“vue项目打包后可以配置接口地址的方法” 有 2 条评论
我的config/index.js里面有一个地址，那个地方需不需要进行修改
0
什么地址,,,
0
发表评论电子邮件地址不会被公开。
评论
姓名
电子邮件
站点
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！