vue添加axios,并且指定baseurl的方法


Posted in Javascript onSeptember 19, 2018

本文主要介绍如何在vue项目中引入axios,并且在使用的时候指定baseurl。

好,下面上货。

1、首先需要的是一个vue项目,这个可以参考以前的文章。

2、然后是npm install axios --save-dev

3、在main.js中添加如下内容:

import axios from 'axios'
Vue.prototype.$ajax=axios;

4、这个时候应该可以在项目中使用了,使用的方法如下:

testget: function () {
  this.$ajax({
   method: 'get',
   url: 'zk/connect?connectionString=' + this.connectionString,
  }).then(function (res) {
   let data = res.data;
   alert(data);
   console.error(data);
   this.conflag = data.flag;
  }.bind(this));
  },

现在使用的是默认的baseurl,每次如果我们都需修改这个baseurl会非常的麻烦。我们这里可以修改baseurl。

5、添加一个Global.vue,内容如下:

<script>
 const BASE_URL = 'http://192.168.0.108:7878/zkview/';
 export default{
 BASE_URL
 }
</script>

6、在main.js中添加如下内容:

import global_ from './Global.vue'
Vue.prototype.GLOBAL = global_;
axios.defaults.baseURL=global_.BASE_URL;
Vue.prototype.$ajax = axios;

7、然后就能够正常的在各个模块中使用了。

后记:当然,很多全局变量都可以在Globa.vue中声明,并而且export出来。

在模块中使用的时候只需这样:

this.GLOBAL.BASE_URL即可。

以上这篇vue添加axios,并且指定baseurl的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
Javascript中For In语句用法实例
May 14 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
js select实现省市区联动选择
Apr 17 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
vue中的计算属性实例详解
Sep 19 #Javascript
Vue axios设置访问基础路径方法
Sep 19 #Javascript
json前后端数据交互相关代码
Sep 19 #Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 #Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 #Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 #Javascript
vue动态设置img的src路径实例
Sep 18 #Javascript
You might like
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
详解python中asyncio模块
2018/03/03 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
档案保密承诺书
2014/06/03 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
公司员工离职证明书
2014/10/04 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
MySQL普通表如何转换成分区表
2022/05/30 MySQL