1.安装和配置

安装依赖:https://www.npmjs.com/package/vite-plugin-mock

pnpm install -D vite-plugin-mock mockjs

在 vite.config.js 配置文件启用插件:

import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
//这里用到了箭头函数,需要把之前的格式改一下,之前里面传的是对象，现在传的是箭头函数
export default (({ command })=> {return {plugins: [vue(),viteMockServe({//表示开发时候用mock数据localEnabled: command === 'serve',}),],}
}

上面的localEnabled可能会报错-----viteMockServe({ localEnabled: command === ‘serve’, }) 类型“{ localEnabled: boolean; }”的参数不能赋给类型“ViteMockOptions”的参数。对象字面量只能指定已知属性，并且“localEnabled”不在类型“ViteMockOptions”中。
解决方法如下:
卸载vite-plugin-mock:

npm uninstall vite-plugin-mock

重新安装 2.9.6版本

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

就可以完美解决。

2.创建mock数据

在根目录创建mock文件夹:

在mock文件夹内部创建一个user.ts文件:

//用户信息数据
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} }},},
]

3.使用axios测试

安装axios:

npm install axios

在main.ts入口文件中写一些测试代码:

import axios from "axios";
axios({url: "/api/user/login",method: "post",data: {username: "admin",password: "111111",},
}).then((res) => {console.log(res.data);
});

去浏览器查看控制台:

说明mock数据生效。