初始化

什么是mock？

Mock 是一种在开发环境中模拟后端接口数据的技术。它可以帮助前端开发者在不依赖真实后端服务的情况下，快速开发和测试前端功能。

安装依赖

# 核心插件
npm install vite-plugin-mock mockjs --save-dev
# TypeScript 类型（可选）
npm install @types/mockjs --save-dev

配置

在 vite.config.js 中添加插件配置：

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

export default defineConfig({
  plugins: [
    // Mock 插件核心配置
    viteMockServe({
      // Mock 文件根目录（默认：src/mock）
      mockPath: 'src/mock',
      // 配置文件路径（默认：mock/config.json）
      configPath?: "";
      // 忽略文件匹配规则（默认：/\.json$/）
      ignore:"/.json$/";
      // 监听文件变化（默认：true）
      watchFiles: true;
      // 是否启用（默认：true）
      enable: true;
      // 是否在控制台显示请求日志（默认：true）
      logger: true;
      // 是否允许跨域（默认：true）
      cors: true;
    }),
  ],
})

在vite.config.ts中添加插件配置：

import { viteMockServe } from "vite-plugin-mock";
import path from "path";

// 环境判断
const isDav = process.env.NODE_ENV === "development";

export default defineConfig({
  plugins: [
    ...
    viteMockServe({
      mockPath: "./mock", //mock文件路径
      watchFiles: true, //监听文件变化
      configPath: path.resolve(process.cwd(), "mock.config.ts"), //mock配置文件路径
      enable: isDav, //是否启用(生产环境),
      logger: true, //是否在控制台显示请求日志
      cors: true, //是否允许跨域
    }),
  ],
    ...
});

创建Mock文件

在 src/mock 目录下创建一个 mock.ts/js 文件，用于定义 Mock 数据：

export default [
  {
    url: "/test",
    method: "get",
    response: () => {
      return { code: 200, data: { name: "vben" } };
    },
  },
];

测试

使用axios发起请求：

async function test() {
  const res = await axios.get("/test")
  console.log("test", res) //{ code: 200, data: { name: 'vben' }}
}
test()