在基于Vite的框架中配置Mock服务器

在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器， 则可以借助 mock.js 配置一个后端服务器来返回前端需要的数据，本文将会分别介绍在 Vue 项目中 Mock 服务器的配置方法。

---

Vite 项目

创建项目

Vite 项目的初始化与插件的安装按照官网上的教程进行：

yarn create vite

yarn add -D mockjs
yarn add -D vite-plugin-mock

yarn add axios

配置 Vite

在对 Vite 进行配置之前，需要先编辑根目录下的 tsconfig.node.json，然后把里面的 include 内的内容删除，否则在配置 Vite 的时候会报错，删除后的文件如下：

// /tsconfig.node.json
{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": []
}

将 Vite 插件的设置进行分离

这里借鉴 NaiveUI Admin 的设计思路，将 Vite 的所有插件的配置分离出去，通过函数进行返回，来实现模块化开发，具体的做法是：

1. 先在根目录新建 vite 目录，用来存放 Vite 相关的设置，将插件的配置放在其中的 plugins 子目录。
2. plugins 目录中首先有一个 index.ts，作为工厂函数统一返回插件的配置列表，对应着 Vite 设置中的 plugins 的设置项的值。
3. 然后，每一个插件对应着一个 typescript 文件，返回该插件的具体配置。

在本文的场景中，各文件的内容如下：

1. vite/plugins/index.ts

   // vite/plugins/index.ts
   import type { Plugin } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import { configMockPlugin } from './mock';
   
   export function createVitePlugins() {
       // vitePlugins就是Vite所有插件的配置列表
       const vitePlugins: (Plugin | Plugin[])[] = [
           vue(),
           // 初始插件，在这里导入其他框架的resolver
           // Autoimport({
           //     resolvers: []
           // }),
           // Components({
           //     resolvers: []
           // })
       ];
   
       // 将mock的设置加入插件列表中
       vitePlugins.push(configMockPlugin(true, true));
   
       // 下面可以添加其他的插件
       // vitePlugins.push(...);
   
       return vitePlugins;
   }
   

2. vite/plugins/mock.ts

   // plugin/mock.ts
   import { viteMockServe } from 'vite-plugin-mock';
   
   export function configMockPlugin(isBuild: boolean, prodMock: boolean) {
       return viteMockServe({
           // TS文件支持，打开后将忽略js文件
           supportTs: false,
           // 模拟服务的文件夹，在设置了configPath后失效
           mockPath: 'mock',
           // 是否实时更新
           watchFiles: true,
           // 在模拟时忽略的文件名格式
           ignore: /^\_/,
           // 是否启动本地的mock文件，实质上是Mock开关
           localEnabled: true,
           // 是否在生产环境使用Mock
           prodEnabled: false,
           // 用来动态控制生产环境是否开启Mock，通过动态添加代码到Main.ts中来实现
           // 如果直接把代码写到文件中，就会始终打包
           injectCode: `
          import { setupProdMockServer } from '../mock/_createProductionServer';
          setupProdMockServer();
          `,
       });
   }
   

3. vite.config.ts

   // vite.config.ts
   import { UserConfig, ConfigEnv, defineConfig } from 'vite';
   import { createVitePlugins } from './vite/plugins';
   
   // https://vitejs.dev/config/
   export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
     return {
       plugins: createVitePlugins(),
     }
   })
   

至此，Vite 方面的配置已经完毕，下面就可以配置 Mock 的返回接口了。

配置 Mock 的接口

文件目录结构

同样地，我们在项目根目录下创建一个文件夹来存放 Mock 相关的文件，这里命名为 Mock，该目录的结构说明如下：

mock
├── module1         业务模块1
│   ├── mock1.ts    数据接口1
│   └── mock2.ts    数据接口2
├── module1         业务模块2
│   ├── mock1.ts    数据接口1
│   └── mock2.ts    数据接口2
├── index.ts        导出所有接口
└── _util.ts        对返回值的一些处理

工具函数

有时候我们需要模拟表格数据，而 Mock 提供的随机数据接口一次只能返回一条数据，我们可以自己封装一个函数来处理这种需要返回多个数据的情况，这里还是借鉴 NaiveUI Admin 的做法：

// _utils.ts 一些工具函数, 可用来处理返回的请求
import { mock } from 'mockjs';

// 包装返回的数据
export function resultSuccess(result, { message = 'ok' } = {}) {
    return mock({
        code: 200,
        result,
        message,
        type: 'success',
    });
}
export function resultError(message = 'Request failed', { code = -1, result = null } = {}) {
    return {
        code,
        result,
        message,
        type: 'error',
    };
}
export function resultPageSuccess<T = any>(
    page: number,
    pageSize: number,
    list: T[],
    { message = 'ok' } = {}
) {
    const pageData = pagination(page, pageSize, list);
    return {
        ...resultSuccess({
            page,
            pageSize,
            pageCount: list.length,
            list: pageData,
        }),
        message,
    };
}

// 
export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
    const offset = (pageNo - 1) * Number(pageSize);
    const ret =
        offset + Number(pageSize) >= array.length
            ? array.slice(offset, array.length)
            : array.slice(offset, offset + Number(pageSize));
    return ret;
}

/**
 * @param {Number} times 回调函数需要执行的次数
 * @param {Function} callback 回调函数
 */
export function doCustomTimes(times: number, callback: any) {
    let i = -1;
    while (++i < times) {
        callback(i);
    }
}

export interface requestParams {
    method: string;
    body: any;
    headers?: { token?: string };
    query: any;
}

/**
 * @description 本函数用于从request数据中获取token，请根据项目的实际情况修改
 *
 */
export function getRequestToken({ headers }: requestParams): string | undefined {
    return headers?.token;
}

编写 Mock 接口

现在，按照业务进行模拟接口的编写，这里展示一个示例，返回一个人员信息表格的模拟数据：

// mock/table/list.ts 一个返回表格数据的接口

import { Random } from 'mockjs';
import { resultSuccess, doCustomTimes } from '../_utils';

const tableList = (pageSize) => {
    const result: any[] = [];
    doCustomTimes(pageSize, () => {
        result.push({
            id: '@integer(10,999999)',
            beginTime: '@datetime',
            endTime: '@datetime',
            address: '@city()',
            name: '@cname()',
            avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
            date: `@date('yyyy-MM-dd')`,
            time: `@time('HH:mm')`,
            'no|100000-10000000': 100000,
            'status|1': [true, false],
        });
    });
    return result;
};

export default [
    //表格数据列表
    {
        url: '/api/table/list',
        timeout: 1000,
        method: 'get',
        response: ({ query }) => {
            const { page, pageSize } = query;
            const list = tableList(Number(pageSize));
            return resultSuccess({
                page: Number(page),
                pageSize: Number(pageSize),
                pageCount: 60,
                list,
            });
        },
    },
];

在组件中使用

关于怎么在 Vue 中使用 Axios，请参考其他的文章，这里假设已经完成了 Axio 的封装，在组件中直接调用设置好的接口就可以获取数据了，而且命令行中还会显示调用记录：

<script setup lang="ts">
    import { ref } from 'vue';
    import service from '../axios';
    const text = ref('123');

    const getdata = () => {
        service
            .get('/table/list', {
                params: {
                    page: Math.round(Math.random()*10) + 1,
                    pageSize: Math.round(Math.random()*10) + 1,
                },
            })
            .then((res) => {
                text.value = res.data;
            });
    };
</script>

<template>
    <button @click="getdata">click</button>
    <p>{{text}}</p>
</template>

在 Quasar 项目中使用 Mock

我们这里还是以官方初始模板为基础进行配置。

初始化项目

# 全局安装quasar脚手架
npm install -g @quasar/cli
yarn create quasar
# 注意选择vite作为打包工具, 进入目录后
yarn

yarn add -D mockjs
yarn add -D vite-plugin-mock

修改 Quasar 中的 Vite 配置

需要注意的是，网络上有人提供了基于 boot 文件的解决方案，这种方案可以正常返回数据，但是不能在命令行显示调用记录，而且在浏览器中也看不到网络请求，调试起来不太方便，因此经过探索，只需要将 Vite 插件的配置直接复制到 quasar.config.js 中的 build.vitePlugins 中即可，修改过后的 Quasar 配置文件的部分显示如下：

// 导入mock服务器的函数
const viteMockServe = require('vite-plugin-mock').viteMockServe

build: {
    // 添加mock插件
    vitePlugins: [
        [
            viteMockServe({
                ignore: /^\_/,
                mockPath: 'mock',
                localEnabled: !isBuild,
                prodEnabled: isBuild && prodMock,
                injectCode: `
               import { setupProdMockServer } from '../mock/_createProductionServer';
               setupProdMockServer();
               `,
            })
        ]
    ]
}

创建 Mock 的相关文件

这一部分的文件与 Vite 项目完全一样，就不再赘述

在组件中使用

同 Vite 项目，关键是要封装 Axios

更好的解决方案

在这里推荐一个好用的 API 工具，ApiFox，可以很方便的模拟接口数据，而且有其他开发者分享的 API 接口，十分好用。