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 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 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(3) php 函数
2010/02/15 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python基础教程之循环介绍
2014/08/29 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
HTML5进度条特效
2014/12/18 HTML / CSS
迪奥官网:Dior.com
2018/12/04 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
怎样自定义一个异常类
2016/09/27 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
怎么写好自荐信
2013/10/30 职场文书
省三好学生申请材料
2014/01/22 职场文书
小学生作文评语
2014/04/18 职场文书
中秋晚会活动方案
2014/08/31 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Python实现排序方法常见的四种
2021/07/15 Python