vue添加axios，并且指定baseurl

迷南。 2022-06-08 05:50 741阅读 0赞

# vue添加axios，并且指定baseurl #

本文主要介绍如何在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即可。

发表评论取消回复

表情：

评论列表（有 0 条评论，741人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 配置baseurl

config文件夹下新建global.js const BASE_URL = 'http://xxxxxxx' export default {

桃扇骨/ 2023年06月26日 15:27/ 0 赞/ 9 阅读

相关 linux添加普通用户并且只能访问指定目录

前言最近公司内部同事需要，普通用户查看服务器上面的一些日志 -------------------- 具体操作如下： 1.首先创建指定的目录 mkd

忘是亡心i/ 2023年01月22日 11:45/ 0 赞/ 47 阅读

相关 Vue笔记-vue3中.en.dev文件及axios.defaults.baseURL的使用

结构是这样的： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

喜欢ヅ旅行/ 2023年01月20日 05:56/ 0 赞/ 7 阅读

相关 vue中使用axios发送请求，多种baseURL的配置方法

配置 config/dev.env.js： 'use strict' const merge = require('webpack-merge');

灰太狼/ 2022年12月28日 15:30/ 0 赞/ 1009 阅读

相关 vue-cli 项目添加Axios，请求接口

进入vue-cli4创建后的项目安装axios npm install -s axios 创建axios实例及请求拦截 src下创建一个文件

淩亂°似流年/ 2022年12月17日 13:53/ 0 赞/ 219 阅读

相关 vue中使用axios给生产环境和开发环境配置不同的baseUrl

第一步：设置不同的接口地址找到文件：/config/dev.env.js 代码修改为： var merge = require('webpack-merge'

￡神魔★判官ぃ/ 2022年12月07日 12:51/ 0 赞/ 220 阅读

相关 vue3集成axios，添加拦截器

[文档>>][Link 1] npm install axios --save 在main.ts中引入 import { createApp } from

淡淡的烟草味﹌/ 2022年11月06日 04:57/ 0 赞/ 232 阅读

相关 vue3中.env.dev文件结合axios.defaults.baseURL的使用

结构是这样的： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

布满荆棘的人生/ 2022年09月17日 03:13/ 0 赞/ 172 阅读

相关 vue添加axios，并且指定baseurl

vue添加axios，并且指定baseurl 本文主要介绍如何在vue项目中引入axios，并且在使用的时候指定baseurl。好，下面上货。 1、首先需

迷南。/ 2022年06月08日 05:50/ 0 赞/ 742 阅读

相关 Vue - 通过axios拦截器添加token验证

在main.js中配置axios: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

我就是我/ 2021年07月25日 13:49/ 0 赞/ 454 阅读