vue axios 给生产环境和发布环境配置不同的接口地址(推荐)


Posted in Javascript onMay 08, 2018

本项目是vue-cli搭建的项目框架,引入axios用于数据请求。配置不同的接口地址,(首先确保已经集成了axios,如对集成axios有疑问的道友,可参看我之间的一篇vue-cli 引入axios)操作如下

一、设置不同的接口地址

找到如下文件

/config/dev.env.js

/config/prod.env.js

之后增加接口地址域名配置,增加后的文件内容如下

vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

二、在自己重新封装的axios文件中(api/api.js),将配置好的接口地址作为baseURL拼接到接口路径中

vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

详细的api.js文件可参考如下代码,根据自己公司项目组编码习惯可自作调整

// 配置API接口地址 
var root = process.env.API 
// 引用axios 
var axios = require('axios') 
// 自定义判断元素类型JS 
function toType (obj) { 
 return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() 
} 
// 参数过滤函数 
function filterNull (o) { 
 for (var key in o) { 
 if (o[key] === null) { 
  delete o[key] 
 } 
 if (toType(o[key]) === 'string') { 
  o[key] = o[key].trim() 
 } else if (toType(o[key]) === 'object') { 
  o[key] = filterNull(o[key]) 
 } else if (toType(o[key]) === 'array') { 
  o[key] = filterNull(o[key]) 
 } 
 } 
 return o 
} 
function apiAxios (method, url, params, success, failure) { 
 if (params) { 
 params = filterNull(params) 
 } 
 axios({ 
 method: method, 
 url: url, 
 data: method === 'POST' ? params : null, 
 params: method === 'GET' ? params : null, 
 baseURL: root, 
 withCredentials: false 
 }) 
 .then(function (res) { 
 console.log(res); 
 return; 
 if (res.data.success === true) { 
  if (success) { 
  success(res.data) 
  } 
 } else { 
  if (failure) { 
  failure(res.data) 
  } else { 
  window.alert('error: ' + JSON.stringify(res.data)) 
  } 
 } 
 }) 
 .catch(function (err) { 
 let res = err.response 
 if (err) { 
  window.alert('api error, HTTP CODE: ' + res.status) 
  return 
 } 
 }) 
} 
// 返回在vue模板中的调用接口 
export default { 
 get: function (url, params, success, failure) { 
 return apiAxios('GET', url, params, success, failure) 
 }, 
 post: function (url, params, success, failure) { 
 return apiAxios('POST', url, params, success, failure) 
 } 
}

三、修改main.js,引入自己重新封装好的axios文件(api/api.js),修改好的文件如下图所示

vue axios 给生产环境和发布环境配置不同的接口地址(推荐)

四、在页面中调用,测试是否生效,开发环境调通后,build之后查看正式环境是否也生效

直接调用ajax请求

export default {  
 created(){ 
  this.$http.post('Web/test',null, res => { 
  console.log(res) 
  }) 
 } 
}

总结

以上所述是小编给大家介绍的vue axios 给生产环境和发布环境配置不同的接口地址,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery setTimeout()函数使用方法
Apr 07 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
js实现日历
Nov 07 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 #Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 #Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 #Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 #Javascript
浅谈React 服务器端渲染的使用
May 08 #Javascript
vue.js做一个简单的编辑菜谱功能
May 08 #Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 #Javascript
You might like
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python语言生成水仙花数代码示例
2017/12/18 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python之指数与E记法的区别详解
2019/11/21 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
淘宝中秋节活动方案
2014/01/31 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
公司的力量观后感
2015/06/05 职场文书
装修安全责任协议书
2016/03/22 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL