持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天

mock

一个优秀的前端应该学会如何做到前后端分离开发，自己模拟请求的数据及其逻辑，以免被后端的开发进程阻塞（提升一定开发效率，避免背锅！），所以我们使用了一个工具——mock。

mock 引入

这里我们安装 mock 插件mock.js及 vite 官方推荐的 vite-plugin-mock插件来模拟与后端的交互。

pnpm install mockjs

pnpm install vite-plugin-mock -D

关于 mock 的使用，我们分开发环境（本地）和生产环境（线上）。

开发环境

首先在项目根目录下创建mock文件，在其中写一个我们上篇提到的动态路由asyncRoutes.ts，作为模拟数据。

使用 mock 数据之前，需要将该插件进行配置并引入 Vite

// build\vite\plugins\mock.ts
import { viteMockServe } from "vite-plugin-mock";

export function configMockPlugin() {
  return viteMockServe({
    // default
    supportTs: true,
    logger: false,
    mockPath: "mock",
  });
}

然后就可以使用啦。我们在api文件夹中模拟这个请求，在界面中使用即可。

// src\api\routes.ts
import { http } from "../utils/http";

export const getAsyncRoutes = (params?: object) => {
  return http.request("get", "/getAsyncRoutes", { params });
};

生产环境

有些网页上需要有一些模拟数据，而且很多开源的后台管理系统都会有线上预览的站点。这些时候，我们就需要使用到线上的mock（但是请务必在发布正式生产环境时将mock删除，小心挨领导批哦！）。

此时我们需要修改一下mock插件的配置

// build\vite\plugins\mock.ts
import { viteMockServe } from "vite-plugin-mock";

export function configMockPlugin(command) {
  const prodMock = true;
  return viteMockServe({
    mockPath: "mock",
    localEnabled: command === "serve", // 开发环境
    prodEnabled: command !== "serve" && prodMock, // 生产环境
    injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `,
    logger: false,
  });
}

command

注意到，上面我们传入了一个command参数，这个参数其实就是告诉我们，当前是处于什么环境下。这个环境判断其实在前面讲过，我们可以从vite提供的接口中获得。

injectCode

这里为什么选择通过injectCode注入代码呢？

在插件内通过injectCode注入代码，方便控制mockjs是否被打包到最终代码内。如果在 main.ts内判断，且关闭了mock功能，mockjs会被打包到构建文件内，这样会增加打包体积。

这段注入代码我们也在src的根目录下创建就行

// src\mockProdServer.ts
import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";

const modules = import.meta.globEager("../mock/*.ts");
const mockModules = [];

Object.keys(modules).forEach((key) => {
  mockModules.push(...modules[key].default);
});

export function setupProdMockServer() {
  createProdMockServer(mockModules);
}

（十四）Vue3-huohuo-admin mock模拟数据

mock

mock 引入

开发环境

生产环境