Vue3利用vue-plugin-mock实现模拟后台数据

1.安装vite-plugin-mock 

npm install vite-plugin-mock@2.9.8 --save-dev

这里选择2.9版本，3.0会在mock文件夹下产生大量文件，等待后期完善。

2.配置 Vite 插件： 在 Vite 配置文件（通常是 vite.config.js 或 vite.config.ts）中导入并使用 vite-plugin-mock 插件：

import { viteMockServe } from 'vite-plugin-mock';

export default {
  plugins: [
   viteMockServe({
      mockPath: "path/to/your/mock/files",
      localEnabled: true,
    }),
    // ...其他插件
  ],
};

接下来的步骤（创建 mock 文件以及使用 mock 数据）与之前的解释相同。请确保在 Vite 配置文件中导入 vite-plugin-mock 插件，并使用 viteMockServe 函数创建插件实例。这样，你就可以在项目中使用模拟 API 响应了。

其中：'path/to/your/mock/files'为接下来建立的存放mock文件的位置，详细配置可以查看官方文档

3.建立存放mock文件的路径

比如在项目根目录下新建mock文件夹或者像我一样建立src/utils/mock

在mock文件夹下建立mock.ts文件并写入你要模拟的接口以及返回数据：

export default [
  {
    url: "/api/login",
    method: "post",
    response: () => {
      return {
        code: 200,
        data: {
          access_token: "123456",
          token_type: "Token",
          user_info: {
            created_at: "2023-05-01 20:00:00",
            email: "test@crxzy.cn",
            email_verified_at: "2023-05-01 20:00:00",
            id: 1,
            name: "test_user",
            avatar: "123.jpg",
            roles: ["admin", "super_admin", "customs_user"],
            updated_at: "2023-05-01 20:00:00",
          } as UserInfo,
        },
        message: "success",
      } as ApiResponse<LoginResponse>;
    },
  },
] as MockMethod[];

注：这里url不能写成“api/login”，api前的“/”是必须的，不然访问就是404，在这里卡了半天 

4.重启本地服务

这样一来，你可以在开发过程中模拟 API 请求，而无需实际连接到后端服务器。当你准备好连接到真实 API 时，只需删除或禁用 vite-plugin-mock 即可。