vue:axios請求本地json路徑錯誤如何解決

這篇文章主要講解了“vue:axios請求本地json路徑錯誤如何解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue:axios請求本地json路徑錯誤如何解決”吧！

axios請求本地json路徑錯誤

本例用的是vuecli4，json等靜態(tài)資源存放在public文件夾中

返回404

this.axios.get('public/redeme.json').then((res) => {
      console.log(res.data)
    })

其實vue從代碼到界面展示還要經過編譯，所以路徑會有所改變

實際路徑可以先打包一下，我是這么找到json的路徑的

打包后的文件目錄如下

所以我把路徑改成：

this.axios.get('./redeme.json').then((res) => {
      console.log(res.data)
    })

獲取成功：

axios的基礎路徑如何設置

在不通過接口文件的情況下，如何使用axios呢？

在組件中調用axios，沒必要一定在接口文件中設置，你可以選擇在入口文件中設置基礎訪問路徑，在組件中通過this.axios這個方法發(fā)送異步請求即可。

舉個栗子吧↓

項目要求：所有api的域名為：http://www.escook.cn:3000  如果后面文檔中，有的域名地址和這里不一樣，以這里的為主；

請求接口：/api/getnewslist

請求方式：get

具體代碼如下：

步驟一：入口文件：main.js

import axios from 'axios';
axios.defaults.baseURL='http://www.escook.cn:3000 '
Vue.prototype.axios=axios

步驟二：組件：newList.vue

 created () {
    this.axios.get('/api/getnewslist').then(res=>{
         console.log(res) 
         this.newList=res.data.message
    })
  }

注意：this指代vue，要在axios前加上this 

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