vue-cli全局配置后台接口方式，一处修改多处适用

本文档目的在于帮助对vue了解比较少的同学，能够快速配置vue应用中的接口地址。方便项目切换服务环境后，重新修改多组件的http请求地址。

方法：
1、配置全局Api其实就是在全局抛出一个公共对象、我们在src下新建一个文件夹 interface 里面 创建一个 index.js 文件用来存储全局Api对象。

2、编写index.js

interface/index.js

// 配置全局Api其实就是在全局抛出一个公共对象
// 配置主机地址和端口号（可以有多个，需要测试那个环境字节打开那个base即可）

// 配置全局Api其实就是在全局抛出一个公共对象

// 配置主机地址和端口号（可以有多个，需要测试那个环境字节打开那个base即可）
let globalUrl = "http://10.110.126.192:8088";//后台接口

// 在线api接口路径，需要和项目后台确认
let baseUrl = {
    globalUrl
}

//导出baseUrl对象
export default baseUrl
//既然是全局环境都可调用的Api接口地址，那么一定要在全局引用 src/main.js

3.//既然是全局环境都可调用的Api接口地址，那么一定要在全局引用 src/main.js

import Vue from 'vue'

// 引入vue模块，引入index接口地址对象
import Api from "@/interface/index"

// 将Api对象绑定在vue实例的原型上
Vue.prototype.$Api = Api

Vue.config.productionTip = false
new Vue({
  router,
  store,
  Api,
  render: h => h(App)
}).$mount('#app')

4、在项目中任何一个vue文件中我们都可以用 this.$Api 来访问接口地址，例如

console.log(this.$Api.globalUrl)

最后：

本文档意在与帮助初学者快速构建vue项目，虽没什么技术含量。但不要随意转载，如需转载保存，请署上 转载地址。谢谢配合。