vue报错解决:mock.js请求数据报错404

本文介绍了如何在Vue项目中使用Mock.js模拟接口数据,特别是在axios设置了baseURL的情况下,如何正确配置Mock.js以确保请求正常。步骤包括安装Mock.js和axios,配置axios,创建mock目录并设置Mock规则,引用mock文件,以及在组件中使用axios进行请求。通过这些步骤,可以避免在开发过程中依赖真实服务器,提高开发效率。
摘要由CSDN通过智能技术生成

错误截图:
在这里插入图片描述

解决方法:因为在main.js文件中设置了axios的baseURL,只需要在mock暴露的接口中加上axios配置的baseURL即可正常请求
在这里插入图片描述
在这里插入图片描述

拓展:moke获取数据配置

1.安装mock.js和axios

npm install mockjs --save
npm install axios --save

2.在main.js中配置axios

import axios from 'axios'
Vue.prototype.axios= $http

3.创建mock目录,在mock目录中创建index.js,配置mock

import Mock from 'mockjs'

//注意:如果配置了axios的baseURL,在暴露mock的接口时需要加上配置的axios的baseURL
Mock.mock('http://localhost:8080/test', {
  code: 0,
  msg: 'mock测试'
})

4.在main.js中引用mock.js

import './mock/index.js'

5.使用axios请求mock

async mounted() {
    const res = await this.$http.get('/test')
    console.log(res)
  }

6.请求成功
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值