引言：

‌Mock在前端开发中的作用主要是模拟后端接口数据，以便前端开发者能够提前进行页面和功能的开发、调试，而无需等待后端提供真实的接口数据‌。Mock数据可以加速前后端开发的协同，避免因数据延迟导致的开发阻塞‌。【摘自百度】

配置mock：

安装依赖：

pnpm install -D vite-plugin-mock mockjs

vite-plugin-mock和mockjs都要安装,如上。

配置mock:

打开vite.config.js文件，进行配置：
其中官网提到，这个配置要暴露一个箭头函数，箭头函数返回一个配置对象。于是我们需要将配置对象改成箭头函数的形式。这里的 {command} 是用来检测当前开发环境的，即回调函数中我们注入一个command 来检测环境。保证了在开发阶段可以使用mock接口。也可以点击这里看官网自行配置。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// 引入mock接口需要的插件
import { viteMockServe } from 'vite-plugin-mock'
// 引用svg需要的插件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";export default defineConfig(({command})=>{return {plugins: [vue(),viteMockServe({localEnabled: command === 'serve',// 保证开发阶段可以使用mock接口}),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), "src/assets/icons")],// Specify symbolId formatsymbolId: "icon-[dir]-[name]"})],resolve: {alias: {"@": path.resolve(__dirname, "src") // 相对路径别名配置，使用 @ 代替 src}},// scss全局变量的配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";'}}}}
});

使用mock：

在根目录下创建mock文件夹，mock文件夹下创建一个user.ts文件来存储用户的信息并对外暴露一个数组，数组里面包含用户登录和获取用户信息两个接口。

// createUserList:函数执行返回一个数组，数组里面包含两个用户信息
function createUserList() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '111111',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '111111',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]
}// 对外暴露一个数组：数组里面包含两个接口
export default [// 用户登录接口{url: '/api/user/login',//请求地址method: 'post',//请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body;//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token;//查看用户信息是否包含有次token用户const checkUser = createUserList().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: {checkUser} }},},
]

测试使用mock数据：

安装axios：

pnpm install axios

测试：

我们在main.ts文件下写测试代码：

我们发现可以请求到假的数据：


并且如果我们输入错误的密码，返回的也是我们所期待的：