vue使用全局變量來定義axios請求地址

在使用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的值就可以了。