vue項目中使用axios遇到的相對路徑和絕對路徑問題怎么解決

這篇文章主要講解了“vue項目中使用axios遇到的相對路徑和絕對路徑問題怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue項目中使用axios遇到的相對路徑和絕對路徑問題怎么解決”吧！

使用axios遇到的相對路徑和絕對路徑問題

部分依賴說明：

"vue": "^2.5.2",

"webpack": "^3.6.0",

"axios": "^0.19.0",

通過設置全局baseURL，在其他組件中使用axios時便可以很方便。有時又可以根據需要在具體的請求配置中設置新的baseURL以覆蓋全局的baseURL。在這些過程中，可能需要正確的使用相對路徑和絕對路徑才能達到預期的效果。

1.設置全局baseURL

首先在main.js中設置axios.defaults.baseURL = '/api';

絕對路徑的形式：

1.url設置時，開頭使用/，如下方的使用axios發起的post請求：

axios({
  //請求方式為post
  method: 'post',
  //絕對路徑
  url: '/user/12345',
  //data等設置省略
  ......
});

其完整的Request URL為：http://localhost:8080/api/user/12345

2.url設置時，直接使用http或https開頭，如下方使用axios發起的get請求：

axios({
  //請求方式為get
  method:'get',
  //絕對路徑
  url:'http://192.168.6.66:8080/user/12345',
  //其他設置省略
  ......
})

其完整的Request URL為：http://192.168.6.66:8080/user/12345

2.覆蓋baseURL

在當前界面下，需要發起請求，而且這個請求的baseURL不再是已經設置好的全局baseURL時，這時需要在請求配置中設置新的baseURL（如res）用來覆蓋全局設置的baseURL:api。

最初的印象中，使用axios發起請求時設置的url及完整的Request URL似乎與發起請求的操作所在界面的url路徑無關。但實際效果如何呢？這些有和絕對路徑和相對路徑有什么關系呢？

2.1.當前界面所在URL

當前界面所在的URL為：http://localhost:8080/app/pro

2.2.使用相對路徑

以發送post請求為例，請求配置如下：

axios({
  //請求方式為post
  method: 'post',
  //絕對路徑
  url: '/pic/',
  //`baseURL`將自動加在`url`前面，除非`url`是一個絕對URL。
  baseURL: 'res',
  //data等設置省略
  ......
});

其完整的Request URL為：http://localhost:8080/app/res/pic/，可以看到并不能達到想要的結果。

2.3.使用絕對路徑

還是以發送post請求為例，請求配置如下：

axios({
  //請求方式為post
  method: 'post',
  //絕對路徑
  url: '/pic/',
  //`baseURL`將自動加在`url`前面，除非`url`是一個絕對URL。
  baseURL: '/res',
  //data等設置省略
  ......
});

其完整的Request URL為：http://localhost:8080/res/pic/，可以看到此時將baseURL的值由api覆蓋為res，達到了預期的效果。

axios設置訪問基礎路徑

看過axios的官方文檔后配置變得簡單：

在main.js 做如下配置

import axios from 'axios'
axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web'
Vue.prototype.axios = axios

最后一行是將axios配置到Vue原型中，使用方法為：

this.axios.get('/test/1').then(function (response) {}）

可能會遇到下面的報錯

isURLSameOrigin.js?cf95:57 Uncaught (in promise) TypeError: Cannot

read property 'protocol' of undefined

這是因為axios不是VUE插件，不能使用 Vue.use(axios) 方式引用，需要使用上述原型方式引入 

感謝各位的閱讀，以上就是“vue項目中使用axios遇到的相對路徑和絕對路徑問題怎么解決”的內容了，經過本文的學習后，相信大家對vue項目中使用axios遇到的相對路徑和絕對路徑問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！