首页 > web前端 > js教程 > vue axios生产环境与发布环境配置不同接口地址步骤详解

vue axios生产环境与发布环境配置不同接口地址步骤详解

php中世界最好的语言
发布: 2018-05-23 10:53:52
原创
5346 人浏览过

这次给大家带来vue axios生产环境与发布环境配置不同接口地址步骤详解,vue axios生产环境与发布环境配置不同接口的注意事项有哪些,下面就是实战案例,一起来看一下。

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

一、设置不同的接口地址

找到如下文件

/config/dev.env.js

/config/prod.env.js

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

// 配置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 

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),修改好的文件如下图所示

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

直接调用ajax请求

1

2

3

4

5

6

7

export default {  

 created(){ 

  this.$http.post('Web/test',null, res => { 

  console.log(res) 

  }) 

 

}

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS调用本地摄像头功能步骤详解

JS实现json对象数组按对象属性排序步骤详解

以上是vue axios生产环境与发布环境配置不同接口地址步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板