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中axios解决跨域问题和拦截器的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue Element UI使用中遇到的问题，对ElementUI感兴趣的同学，可以参考下2021-05-05
vue路由警告:Duplicate named routes definition问题
这篇文章主要介绍了vue路由警告:Duplicate named routes definition问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文介绍了如何在Vue项目中配置多个静态文件目录,并提供了使用Vite和Webpack实现的示例,通过在vite.config.ts或vue.config.js中引入相关插件和配置,可以轻松实现自定义静态文件目录,希望这些内容对您有所帮助,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要介绍了vue中实现监听数组内部元素方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了浅谈Vue.set实际上是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue中的v-model原理,与组件自定义v-model详解
这篇文章主要介绍了vue中的v-model原理,与组件自定义v-model详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue中实现高德定位功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue 弹窗时 监听手机返回键关闭弹窗功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值(页面不跳转) ,需要的朋友可以参考下2019-05-05
今天小编就为大家分享一篇在vue中解决提示警告 for循环报错的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论