vue3+ts集成mockjs

前言

参考了两篇文章（文章一文章二）并结合自己的实际使用整理了这篇内容，我没有采用解析json5文件生成json数据的方式，因为webpack>5引用fs、path读取json5文件时会出现很多问题，我目前还没有办法解决。
大家如果有解决办法或者更好的办法希望大家告诉我哈~

mock官方文档

Mock.js

安装mockjs

npm install mockjs --save-dev

在src文件夹下创建mock文件夹

mock文件夹下包括index.ts、typing.ts、apis1.ts、apis2.ts、apis3.ts

index.ts

import Mock from "mockjs";
import { MockParams } from "./typing";
import apis1 from "./apis1";
import apis2 from "./apis2";
const mocks = [...apis1, ...apis2];
//设置延时时间
Mock.setup({
  timeout: "300",
});

export function mockXHR() {
  let i: MockParams;
  for (i of mocks) {
    Mock.mock(new RegExp(i.url), i.type || "get", i.response);
  }
}

typing.ts

export interface MockParams {
  url: string;
  type: string;
  data?: any;
  params?: any;
  response(option?: any): Record<string, unknown>;
}

apis1.ts

import Mock from "mockjs";
export default [
  // GetUserInfo
  {
    url: "/upms/user/info",
    type: "get",
    response: () => {
      return {
        code: 200,
        message: "成功",
        data: {
          name: "testName",
        },
      };
    },
  },
  // GetToken
  {
    url: "/auth/oauth/token",
    type: "post",
    response: (option: any) => {
      const $name = JSON.parse(option.body).name;
      if ($name) {
        return Mock.mock({
          code: 200,
          message: "成功",
          data: {
            name: "testToken",
          },
        });
      } else {
        return Mock.mock({
          code: 400,
          message: "未提交参数",
        });
      }
    },
  },
];

apis2.ts

import Mock from "mockjs";
export default [
  // AddGoods
  {
    url: "/api/addgoods",
    type: "post",
    response: function (option: any) {
      const $name = JSON.parse(option.body).name;
      if ($name) {
        return Mock.mock({
          status: 200,
          message: "提交成功",
          data: {
            goods: [
              {
                name: "MacbookPro",
                num: 1,
              },
              {
                name: "ipad",
                num: 2,
              },
            ],
          },
        });
      } else {
        return Mock.mock({
          status: 400,
          message: "未提交参数",
        });
      }
    },
  },
];

apis3.ts生成随机数据

可以采用Mock.js官方文档生成随机数据的方式
这里使用了json5生成随机数据的形式

import Mock from "mockjs";
export default [
  {
    url: "/user/userInfo",
    type: "get",
    response: () => {
      return Mock.mock({
        id: "@id", //得到随机id
        username: "@cname()", //得到随机姓名
        date: "@date()", //得到随机日期
        avatar: "@image('200*200','red','#fff','avatar')", //得到随机图片
        description: "@paragraph", //得到随机描述
        ip: "@ip()", //得到随机ip
        email: "@email()", //得到随机邮箱
        haha: "hahha", //自定义
      });
    },
  },
];

main.ts引入mockjs

import { createApp } from "vue";
import App from "./App.vue";
// 引入ElementPlus
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";
// 引入axios
import axios from "axios";
/**
 * 引入自定义的mockXHR
 * 因为mockXHR不是默认导出的：export default{}
 * 所以引入时需要加大括号，这种可以引入多个
 */
import { mockXHR } from "@/mock/index";
// import { mockXHR ,mockXHR2} from "@/mock/index";

// 判断开发环境
if(process.env.NODE_ENV=="mock"){
	mockXHR();
	// mockXHR2();
}

// 下面两种都行
createApp(App).provide("$axios", axios).use(ElementPlus).mount("#app");
// const app = createApp(App);
// app.provide("$axios", axios).use(ElementPlus).mount("#app");

shim-vue.d.ts添加声明

使ts能够识别mockjs

declare module "mockjs";

在根目录package.json中的scripts新增一种运行方式"serve:mock"

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "serve:mock": "vue-cli-service serve --mode mock"
  },

在根目录创建对应的.env.development、.env.mock文件（采用下边的写法必须要写在根目录）

NODE_ENV = development

NODE_ENV = mock

在终端执行npm run serve:mock就进入mock模式

因为在main.ts中做了环境判断，所以输入该命令就进入mock模式

npm run serve:mock

在页面调用接口

<script lang="ts">
import { defineComponent, inject } from "vue";

export default defineComponent({
  name: "App",
  components: {},
  setup() {
    const $axios: any = inject("$axios");
    function ceshi() {
      // GetUserInfo
      $axios
        .get("/upms/user/info")
        .then((res: any) => {
          console.log("结果1", res);
        })
        .catch((err: any) => {
          console.log("错误1", err);
        });
      // GetToken
      $axios
        .post("/auth/oauth/token", {})
        .then((res: any) => {
          console.log("结果2", res);
        })
        .catch((err: any) => {
          console.log("错误2", err);
        });
      // AddGoods
      $axios
        .post("/api/addgoods", {})
        .then((res: any) => {
          console.log("结果3", res);
        })
        .catch((err: any) => {
          console.log("错误3", err);
        });
      // GetUserInfo
      $axios
        .get("/user/userInfo", {})
        .then((res: any) => {
          console.log("结果4", res);
        })
        .catch((err: any) => {
          console.log("错误4", err);
        });
    }
    return { ceshi };
  },
});
</script>