vue:axios请求本地json路径错误如何解决

这篇文章主要讲解了“vue:axios请求本地json路径错误如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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请求本地json路径错误如何解决”的内容了，经过本文的学习后，相信大家对vue:axios请求本地json路径错误如何解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！