vue3：vite-plugin-mock插件的使用过程

记录vite中使用vite-plugin-mock插件的过程

一、安装依赖
由于此插件是基于mockjs的，所以需要一同安装mockjs，
千万不能装3.0.0版本，不知道什么原因，3.0总是会生成出很多.mjs文件，导致我的电脑崩溃。

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

二、进行配置
在vite.config.js中进行配置

import { UserConfigExport, ConfigEnv } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';

//command 是用于检测当前开发的环境
export default defineConfig(({command}:ConfigEnv):UserConfigExport=>{
	return {
		plugins: [
			//mock配置
			viteMockServe({
      			mockPath: 'mock',          //mock文件路径
				localEnabled: command === 'serve',//是否在开发阶段可使用
				prodEnabled: false,         //生产环境下为false，这样就不会被打包到生产包中
			})
		],
	}
}）

三、开始使用
1.在根目录下创建mock目录（如果要起别的名字，对应上边vite.config.js中mockPath也要做相应修改）。
2.在mock目录下创建文件，例如 mock/user.js (根据自己具体需求去取名)，根据需求写几个接口路径，例子如下：

function createUserList(){
	return [
		{
			userId:1,
			avatar:"",
			username:"admin",
			password:'123456',
			desc:'平台管理员',
			roles:['平台管理员'],
			routes:['home'],
			token:"Admin Token"
		},
		{
			userId:2,
			avatar:"",
			username:"system",
			password:'123456',
			desc:'系统管理员',
			roles:['系统管理员'],
			routes:['system'],
			token:"System Token"
		}
	]
}

export default [
	// 用户登录接口
	{
		url:'/api/user/login',
		method:'post',
		response:(({body})=>{
			const {username,password} = body
			const checkUser =createUserList().find((item)=>{
				return item.username === username && item.password === password
			})
			if(!checkUser){
				return {code:201,data:{message:'账号或密码不正确'}}
			}
			let {token} = checkUser
			return {code:200,data:{token}}
		})
	},
	//获取用户信息
	{
		url:'/api/user/userInfo',
		method:'post',
		response:((body)=>{
			const {token} = body
			const checkUser =createUserList().find((item)=>{
				return item.token === token 
			})
			if(!checkUser){
				return {code:201,data:{message:'token失效'}}
			}
			return {code:200,data:{checkUser}}
		})
	}
]

3.然后用项目中正常调用接口的方式去调用就可以了，例如

axios.post('/api/user/login',{username:'admin',password:'123456'})  

4.好了 ，其他的就不用配置了，正常使用即可