问题还原
  • 我的项目中引入mockjs配置好测试，申请报404谬误
我的项目框架
  • vue3.2+ts+webpack+axios+mockjs
  • node: 14
  • vuecli:4.5
操作步骤
1.新建一个vue3我的项目
  • vue create 我的项目名
2.装置axios
  • npm i axios
3.装置mockjs
  • npm i --save-dev mockjs
  • npm i --save-dev @types/mockjs
4.mock接口

  • mock列表数据

    // src/mock/index.tsimport Mock from "mockjs";const { item } = Mock.mock({"item|6": [  {    id: "@id",    label: "@csentence(1,2)",    value: "@sentence(1)",    "status|1": ["published", "draft", "deleted"],    time: "@datetime",    pageNum: "@integer(0,100)",    "active|1": [true, false],  },],});
  • 官网文档有具体的语法规定
5.拦挡axios申请
  • // src/mock/index.ts// 获取mock的响应数据const getResponse = (url: string,type: string,data: {}[],condition: boolean) => {return {  url,  type: type || "get",  response: (config: any) => {    console.log(config, type);    return condition      ? {          code: 200,          success: true,          message: "申请数据胜利",          content: {            total: data.length,            data,          },        }      : {          code: 500,          success: false,          message: "申请数据失败",        };  },};};const mocks = [getResponse("/api/list", "get", item, true),getResponse("/api/productList", "post", item, true),];export const mockXHR = () => {for (const i of mocks) {  Mock.mock(new RegExp(i.url), i.type || "get", i.response);}};
6.全局调用
  • mian.ts内调用
7.测试申请

  • 封装申请api

    // src/api/index.tsimport axios from "axios";export const getList = () => {return axios("/api/list");};export const getProductList = (data:object) => {return axios({   method:'post',   url:"/api/list",   data});};

  • 页面调用接口测试

    // src/views/test.vue<script setup lang="ts">import { getList, getProductList } from "../api/index";const test = async () => {let res1 = await getList();let res2 = await getProductList({ id: 0 });console.log("mock-get", res1);console.log("mock-post", res2);};</script><template><div id="Container">  <button @click="test">mock数据</button></div></template><style lang="scss" scoped>#Container {height: 50vh;border: 10px solid #000;display: flex;justify-content: center;align-items: center;}</style>

总结：
  • mockjs依据匹配到的url字段拦挡axios申请，关上控制台network不会发网络申请，一旦匹配到相应的返回本人mock的响应数据；
  • 之所以控制台报申请404的谬误，是因为没有拦挡到申请，在本地开发还没有后盾的时候仍然申请这个地址天然会报404；
  • 务必查看拦挡url字段 以及 申请形式（自己栽坑处）十分重要
相干链接
  • mockjs官网: http://mockjs.com/