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 相关文章推荐
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
js轮播图代码分享
Jul 14 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php仿discuz分页效果代码
2008/10/02 PHP
php随机输出名人名言的代码
2012/10/07 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
PDO::prepare讲解
2019/01/29 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
详解在Python和IPython中使用Docker
2015/04/28 Python
python requests 使用快速入门
2017/08/31 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Python调用飞书发送消息的示例
2020/11/10 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
几个SQL的面试题
2014/03/08 面试题
三个Unix的命令面试题
2015/04/12 面试题
销售部主管岗位职责
2013/12/18 职场文书
学生自我评语大全
2014/04/18 职场文书
学习型党组织心得体会
2014/09/12 职场文书
师德师风事迹材料
2014/12/20 职场文书
投诉书格式范本
2015/07/02 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python