mock 模拟接口

pnpm i mockjs vite-plugin-mock -D mock实现模拟接口

vite.config.ts

import { viteMockServe } from "vite-plugin-mock"; //mock
export default defineConfig(({ command }: ConfigEnv): any => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: "mock", //设置模拟.ts 文件的存储文件夹
        enable: true, //是否启用 mock 功能
        watchFiles: true, //设置是否监视mockPath对应的文件夹内文件中的更改
        logger: true // 是否在控制台显示请求日志
      })
    ],
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src")
      }
    },
  };
});

mock/index.ts

import type { MockMethod } from "vite-plugin-mock";
import Mock from "mockjs";
import authMenuList from "../src/assets/json/authMenuList.json";

export default [
  {
    url: "/login",
    method: "post",
    response: () => {
      return Mock.mock({
        code: 0,
        message: "ok",
        data: {
          access_token: "bqddxxwqmfncffacvbpkuxvwvqrhln"
        }
      });
    }
  },
  {
    url: "/user/list",
    method: "get",
    response: () => {
      return Mock.mock({
        code: 0,
        message: "ok",
        type: "success",
        "data|100": [
          {
            id: "@integer(0, 100)",
            title: "@cparagraph( 2 )",
            create_time: "@date('yyyy-MM-dd')",
            author: "@cname()"
          }
        ]
      });
    }
  },
  {
    url: "/menu/list",
    method: "get",
    response: () => {
      return Mock.mock({
        code: 0,
        message: "ok",
        type: "success",
        data: authMenuList
      });
    }
  }
] as MockMethod[];

这样就可以了。后面接口路径只要匹配到mock的url就能正常返回mock数据。上线后不需要只需注释掉mock就可以