安装

pnpm install -D vite-plugin-mock mockjs

vite.config.js 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'export default defineConfig(({ command }) => {return {plugins: [vue(),viteMockServe({enable: command === 'serve',}),],}
})

根目录下创建mock/user.ts

//用户信息数据
function createUserList() {return [{id: 1,username: 'admin',token: 'Admin Token',},{userId: 2,username: 'system',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 } }},},
]

测试

// 记得安装 axios
// main.ts
import axios from 'axios'
axios({url: '/api/user/login',method: 'post',data: {username: 'admin',password: '1112111',},
})