码迷,mamicode.com
首页 > 移动开发 > 详细

vue使用全局变量来定义axios请求地址

时间:2020-05-15 09:36:05      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:cal   prot   网站   最简   更改   set   打包   user   item   

在使用vue时,免不了要使用axios来经常请求数据、调用开发好的webapi,但是webapi在调试模式和部署模式下两者的地址和端口都是不一样的,这就需要我们在vue中定义一个全局的地址了,方便打包和调试用。

1、正常的使用方式

var url=‘http://192.168.3.11:5000/api/user/login‘

       this.axiosPost(url,params)
          .then(res=>{
              if (res===401){
                  this.$message.error(哦,对不起,你所输入的用户名或密码有误!);
              }else{
                  localStorage.setItem("token",res);
                  this.$router.push(/list);
              }
          })

这种是把请求地址写成固定的了,也是最不方便的一种方式了,如果请求的接口地址变了,那么需要替换掉所有的url,只适合单页面来做个例子,不适合在实际中使用。

 

2、相对地址使用

var url=‘/api/user/login‘

这种相对地址使用时,在使用vs code调试时,接口前面的网址就是调试时打开的网址和端口,会发现它和webapi不能是一个端口号,自然不能使用。

但是可以在打包时使用,然后把前端和后端部署到一个网站里。

 

3、vue.prototype全局变量

想要实现改一个参数就改变所有的url,就需要用到全局变量了,网上有各种各样的实现方式,不过我感觉最简单的还是通过main.js中的vue.prototype来实现最方便了,调用也方便。

Vue.prototype.$baseUrl=http://192.168.3.11:5000

然后在需要使用此地址的vue页面中直接使用就可以了

          var url=this.$baseUrl+/api/User/UserLogin;
         
          this.axiosPost(url,params)
          .then(res=>{
              if (res===401){
                  this.$message.error(哦,对不起,你所输入的用户名或密码有误!);
              }else{
                  localStorage.setItem("token",res);
                  this.$router.push(/list);
              }
          })

等需要正式打包发布的时候只需要在main.js中更改一下$baseurl的值就可以了。

 

vue使用全局变量来定义axios请求地址

标签:cal   prot   网站   最简   更改   set   打包   user   item   

原文地址:https://www.cnblogs.com/wjbych/p/12892821.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!