今天在自己尝试弄一个自己用的学习案例库,自己建立了一个本地json数据,计划使用axios进行数据获取。但是一直报错404,百度了很多方法,试来试去,虽然围绕的点一样,但是自己还是耗费了很多时间。废话不多说,进入主题。
xhr.js?b50d:177 GET http:*****blogList.json 404 (Not Found)
dispatchXhrRequest @ xhr.js?b50d:177
xhrAdapter @ xhr.js?b50d:13
dispatchRequest @ dispatchRequest.js?5270:52
Promise.then (async)
request @ Axios.js?0a06:61
Axios.<computed> @ Axios.js?0a06:76
解决这个问题,需要检查两部分,一部分是main.js文件的引入书写格式是否正确,二是检查json文件放置的位置。
检查main.js文件
使用npm i -S axios vue-axios后,在main.js引入的正确书写格式为
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
检查json文件的位置
使用vue-cli打包出来的项目,在不同版本的影响下,整体的项目结构会不太一样,我也是百度看了别人的博客才知道的,其实我只接触到了其中一种,一会我就细说我自己碰到的情况。据说低版本会存在static文件夹,而版本高一点后就没有static文件夹,只存在public文件夹,而我碰到的是public文件夹。
在后一种情况下,我们需要在public文件夹下新建一个名称为js的文件夹,然后再将建立的json文件放在该文件夹下。
然后读取数据
getData() {
this.axios.get('js/blogList.json').then((res)=>{
console.log(res)
这样就解决了,最后就完美地得到了自己写的数据
对于存在static的文件夹据说就是要把json文件放在这个文件下,然后去获取就可以了,本人没有尝试,如果碰到这种情况的,大家可以试试,网上大家都是成功了的。
希望可以帮到大家,遇到bug迎难而上,虽然我经常崩溃。