vue2 + axios + mock.js封装过程，包含mock.js获取数据时报404状态的解决记录，带图文，超详细！！！

报错解释：

在使用Vue2结合axios进行前端开发时，通常会使用mock.js来模拟后端数据。当出现404状态码错误时，通常意味着请求的URL在服务器上没有找到。这可能是因为请求的路径错误，或者mock.js的配置有误。

解决方法：

1. 检查请求的URL是否正确。确保请求的路径与mock.js中定义的路径完全匹配。
2. 检查mock.js的配置。确保mock数据的路径和方法与你的请求相匹配。
3. 如果使用了代理，确保代理配置正确，并且没有拦截或改变mock请求。
4. 确保mock.js已正确引入并运行。可以在控制台查看是否有相关的输出或日志。

示例代码：

// 引入mock.js
import Mock from 'mockjs'
 
// 定义模拟数据和对应的请求方式
Mock.mock('/api/data', 'get', {
  code: 200,
  data: {
    message: 'success'
  }
})
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config
  },
  error => {
    // 请求错误处理
    return Promise.reject(error)
  }
)
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const res = response.data
    return res
  },
  error => {
    // 响应错误处理
    return Promise.reject(error)
  }
)
 
// 使用service发送请求
service.get('/api/data').then(response => {
  console.log(response)
}).catch(error => {
  console.error(error)
})

确保请求的URL与Mock.mock中定义的URL完全匹配，并且请求方法也相同。如果问题依然存在，可以进一步检查网络配置或查看控制台的错误信息以获取更多线索。