簡介

提供本地端的 RESTful API 模擬服務，在開發前端工作時，可以一併透過模擬數據的方式，測試並完善開發內容。

vite-plugin-mock 的說明可以看 GitHub 的 README

開發

建議透過 Vitesse 樣版進行測試

安裝 vite-plugin-mock

透過喜歡的方式進行安裝 vite-plugin-mock

npm i  mockjs -S
npm i vite-plugin-mock -D

pnpm i  mockjs -S
pnpm i vite-plugin-mock -D

Vite 中填加 Plugin

在根目錄中找到 ./vite.config.ts 並加入 vite-plugin-mock 的 plugin。

相關設定可以參考 GitHub 的 README

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

...
plugins: [
    viteMockServe({
        // 讀模擬 .ts 時要忽略的文件（_開頭的就忽略）
        ignore: /^\_/,
        // 模擬 .ts 文件的存儲資料夾
        mockPath: './mock',
        // 當 prodEnabled=true 時，injectCode 會被打包進去，實作動態打包。如果直接寫在 main.ts 中，不管如何都會打包
        injectCode: `
        import { setupProdMockServer } from './mock/_createProductionServer';
        setupProdMockServer();
        `,
    }),
]

建立 Mockup Server 啟動入口

建立 ./mock/_createProductionServer.ts

mock 的資料夾位置一定要對應到 vite.config.ts 中的 mockPath

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
// 透過 Vite 直接載入所有的模擬 .ts
const modules = import.meta.globEager('./**/*.ts')

// 把每個模擬 .ts 的 export default 存入 array
const mockModules: any[] = []
Object.keys(modules).forEach((key) => {
  if (key.includes('/_'))
    return

  mockModules.push(...modules[key].default)
})

// 啟動 Mockup Server 並告知要載入的模擬 .ts 列表
export function setupProdMockServer() {
  createProdMockServer(mockModules)
}

加入 Response 的共用格式

封裝一層回傳格式，確保想要的 HTTP Status Code ，會回傳統一的格式。

建立 ./mock/_util.ts

import Mock from 'mockjs'

// HTTP Status Code 為 200 時的統一回傳格式
export function resultSuccess(result: any, { message = 'ok' } = {}) {
  return Mock.mock({
    code: 200,
    result,
    message,
    type: 'success',
  })
}

建立模擬的 .ts 檔案

建立 ./mock/test/test.ts

import { resultSuccess } from '../_util'

export default [
  {
    url: '/api/v1/test',
    timeout: 1000,
    method: 'get',
    response: ({ query }) => {
      return resultSuccess(query)
    },
  },
  {
    url: '/api/v1/test',
    timeout: 1000,
    method: 'post',
    response: ({ body }) => {
      return resultSuccess(body)
    },
  },
  {
    url: '/api/v1/test/:id',
    timeout: 1000,
    method: 'put',
    response: ({ query, body }) => {
      return resultSuccess({
        id: query.id,
        data: body,
      })
    },
  },
  {
    url: '/api/v1/test/:id',
    timeout: 1000,
    method: 'delete',
    response: ({ query }) => {
      return resultSuccess({
        id: query.id,
        name: 'delete Name',
      })
    },
  },
]