vue:axios请求本地json路径错误问题及解决
更新时间：2022年06月05日 14:07:57 作者：大佬，咋整啊
这篇文章主要介绍了vue:axios请求本地json路径错误问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
axios请求本地json路径错误
本例用的是vuecli4，json等静态资源存放在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这个方法发送异步请求即可。
举个栗子吧↓
项目要求：所有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如何使用echarts绘制柱状图和折线图,文中有详细的示例代码,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
这篇文章主要介绍了vue项目中微信登录的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue页面跳转和参数传递的两种方式，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
下面小编就为大家分享一篇axios全局请求参数设置,请求及返回拦截器的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue中的计算属性,模板内的表达式,用于简单运算,但是模板中放入太多的逻辑会让模板过重且难以维护，更多具体内容一起进入下面文章学习吧,需要的朋友也可以参考一下2021-12-12
在vue2中v-model使用的还是挺多的,不过这个指令一般是用在了输入框中,并且这个指令其实就是个语法糖,下面这篇文章主要给大家介绍了关于vue3组件中v-model的使用以及深入讲解的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了解决vux 中popup 组件Mask 遮罩在最上层的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了Vue2 Dialog弹窗函数式调用实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
本篇文章主要介绍了详解VUE的状态控制与延时刷新，实例分析了数据延时到展示的时候再去刷新的技巧，有兴趣的可以了解一下。2017-03-03
这篇文章主要介绍了如何在Vue中使用protobuf，protobuf是由google推出的和语言无关和平台无关，几乎支持当前的大部分语言，如JavaScript,下文更多相关介绍需要的小伙伴可以参考一下2022-03-03
最新评论