本文档目的在于帮助对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项目,虽没什么技术含量。但不要随意转载,如需转载保存,请署上 转载地址。谢谢配合。