vue 设置全局变量、指定请求的 baseurl

1. 安装 axios：

npm install axios --save-dev
2. 新建一个 Base.vue 文件，书写内容如下：

<script>
  const BASE_URL = 'http://xx.xx.xx.xx'; // 设置全局 URL
  export default{
    BASE_URL
  }
</script>
 

3. 在 main.js 中引入并设置全局变量

// 用于和后台交互，发送请求
import axios from 'axios' 
Vue.prototype.$ajax = axios 
 
// 设置全局变量
import global_ from './Base.vue'
Vue.prototype.GLOBAL = global_;
axios.defaults.baseURL=global_.BASE_URL;
 
4. 在其它组件中使用：

在原本要写 URL的地方用 “ this.GLOBAL.BASE_URL ” 代替就可。

<template>
 
  <div id="box">
    <input type="button" @click="getdata()" value=" 小熊点点它">
 
    <!-- <h1>site : {{data}}</h1> -->
  </div>
 
</template>
 
 
<script type="text/javascript">
 
  var data = ""
 
  export default {
    data () {
      return {
        data 
      }
    },
    methods: {
      getdata() {
        this.$ajax.get(this.GLOBAL.BASE_URL+'/gentle/first').then( res => {
          alert("请求成功，response="+res.data);
          // data = res.data;
          console.log(res.data.navList); 
        }
      )}
    }
  }
 
</script>
 

 

 

 

 

 

参考：https://blog.csdn.net/wild46cat/article/details/78006280 
--------------------- 
作者：微风--轻许-- 
来源：CSDN 
原文：https://blog.csdn.net/jiangyu1013/article/details/84958895 
版权声明：本文为博主原创文章，转载请附上博文链接！