vue项目一个页面接口很多怎么写_vue-cli项目接口地址可配置化(多环境部署)一处修改多处适用...

本文档介绍如何在Vue项目中配置全局API接口地址,实现多环境部署。通过创建一个全局对象并导入到Vue实例中,使得在项目任何组件内都能便捷地调用接口,简化接口管理,提高代码维护性。
摘要由CSDN通过智能技术生成

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

一、前言

我们在上一篇文章分享了

本篇文章我们分享 vue 配置全局对象。在我们平时开发项目的时候,大多数会进行数据交互,这一应用就会使用到交互模块,往往请求的url地址就随着项目模块的增多写在每个模块中,这样的缺点不用我来说,相信大家都知道:模块多了、环境多了很难以维护、修改接口地址,并且很容易出错,哪里多了一个符号或者少了一个就会请求不成功。我们今天分享的小方法就是为了解决这一问题。代码非常简单易懂,意在自己开发项目的时候很快就可以拿过来使用,也为了帮助广大前端爱好者多方位理解vue。话不多说直接上代码。

二、如何配置

思路:

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

2、编写index.js

interface/index.js

//配置主机地址和端口号(可以有多个,需要测试那个环境字节打开那个base即可)

let base = "http://10.110.147.194:8088"

//let base = "http://34.231.59.44:37653"//let base = "http://34.231.59.45:37654"//let base = "http://34.231.59.46:37655"//let base = 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值