Vue3——整合mock 模擬資料生成器

• 安裝依賴

npm install -D mockjs vite-plugin-mock@2.9.6

在 vite.config.js 檔案中引入並配置 vite-plugin-mock 外掛

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: "mock", // 指定mock檔案的路徑
        localEnabled: command === "serve", // 根據命令列引數決定是否開啟本地儲存
      }),
    ],
  }
}

在根目錄建立 mock 資料夾:去建立我們需要 mock 資料與介面！！！

在 mock 資料夾內部建立一個 user.ts 檔案

import { mock } from "mockjs";

// 定義一個mock介面，返回使用者列表
export default [
  {
    url: "/dev-api/user/list",
    method: "get",
    response: () => {
      return {
        code: 0,
        data: mock({
          "list|10": [
            {
              id: "@id",
              name: "@name",
              age: "@integer(18, 60)",
              email: "@email",
              avatar: "@image",
            },
          ],
        }),
      };
    },
  },
];