前言

在开发前端时，在服务端还未对接之前，需要通过模拟数据来验证接口的连通性，另外也需要一些模拟数据来填充页面，也能提供单元测试，因此造一些假数据往往也是项目重要的部分.

使用开源项目 mockjs https://github.com/nuysoft/Mock

在 vite 项目再结合插件 vite-plugin-mock，这里安装 mockjs 和 vite-plugin-mock

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

配置

Mock 的目录结构

├── mock
   └──api
      └── product.ts
      └── order.ts
      └── user.ts
      └── index.ts
   └── index.ts

在项目的根目录下新建 mock 目录，所有的 mock 相关内容都放在这里，在新建一个 api 目录，这里存放具体的模拟接口，新建一个 index.ts ，这里面需要把具体的 mock 接口导出

import order from './order'
import product from './product'
import user from './user'

export default [...order, ...product, ...user]

mock 目录下新建 index.ts

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import api from './api'

export function setupProdMockServer() {
  createProdMockServer(api)
}

vite 插件配置，新建 mock.ts

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

export function setupMockPlugin(isBuild: boolean) {
  return viteMockServe({
    mockPath: 'mock/api',
    localEnabled: !isBuild,
    prodEnabled: isBuild,
    injectCode: `
      import { setupProdMockServer } from '../mock';
      setupProdMockServer();
    `,
  })
}

在 vite 插件配置中引入 mock.ts，一般开发环境开启 mock，生产环境关闭 mock

import type { Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import { setupMockPlugin } from './mock'

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  const vitePlugins: (Plugin | Plugin[])[] = [vue()]

  // vite-plugin-mock
  viteEnv.VITE_USE_MOCK && vitePlugins.push(setupMockPlugin(isBuild));

  return vitePlugins
}

使用

例如有一个商品页面，需要展示所有的分类，类别数据从后台返回

mock 数据

新建 product.ts

const category = [
  {
    id: 1,
    name: '商品1',
    sort: 1
  },
  {
    id: 2,
    name: '商品2',
    sort: 2
  },
  {
    id: 3,
    name: '商品3',
    sort: 3
  },
]

export default [
  {
    url: '/api/product/cat',
    method: 'GET',
    response: (data = {}) => {
      return {
        code: 200,
        message: '返回成功',
        data: {
          result: category
        },
        status: 'ok'
      }
    }
  },
  {
    url: '/api/product/list',
    method: 'GET',
    response: ({query}) => {
      console.log(query.catId)
      const product = productList.filter(item => item.catId == query.catId)
      console.log(product)
      return {
        code: 200,
        message: '返回成功',
        data: product,
        status: 'ok'
      }
    }
  }
]

新建 API

在 api 目录下新建 product/index.ts 文件，这里是

import { get } from '@/utils/http'
import { CategoryRes } from './model'

enum URL {
  cat = '/product/cat'
}

const getAllCategory = async () => get<CategoryRes[]>({ url: URL.cat })

export { getAllCategory }

定义返回类型 model.d.ts

export interface CategoryRes {
  id: number
  name: string
  sort: number
}

调用 API

页面加载的时候获取到数据需要再 onMounted 方法中调用 api，

<script setup lang="ts">
import { CategoryRes } from '@/api/product/model';
import { getAllCategory } from '@/api/product'

const category = ref<CategoryRes[]>([])

onMounted(async () => {
  category.value = await getAllCategory()
})
</script>