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 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
chrome原生方法之数组
Nov 30 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
uniapp开发小程序的经验总结
Apr 08 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
一个odbc连mssql分页的类
2006/10/09 PHP
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
python zip,lambda,map函数代码实例
2020/04/04 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
学术会议欢迎词
2014/01/09 职场文书
房地产开盘策划方案
2014/02/10 职场文书
大学信息公开实施方案
2014/03/09 职场文书
信用卡工作证明范本
2015/06/19 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL