Vue3项目使用mockjs模拟数据

一、下载安装mockjs 和vite-plugin-mock插件

npm i -D  vite-plugin-mock mockjs 

---

二、在 vite.config.ts 文件中添加 mock 配置项（ 配置项添加在 plugins 中 ）

import { viteMockServe } from 'vite-plugin-mock'  // 引入 mock 插件提供的方法


export default defineConfig(( { command } )=>{
  return {
    plugins: [
      vue(),
      AutoImport({
        ...略,
      }),
      Components({
        ...略,
      }),
      createSvgIconsPlugin({
        ...略,
  
      }),

      // mock 配置项
      viteMockServe({
        mockPath:'mock',
        localEnabled:command === 'serve',
      }),
  
       ],
    },
  }
})

注意：

如果 localEnabled:command === 'serve', 报错 ：对象字面量只能指定已知属性，并且“localEnabled”不在类型“ViteMockOptions”中

可能是 vite-plugin-mock 插件的版本问题，可以卸载后重新安装新版本。

npm uninstall vite-plugin-mock   // 卸载

npm install mockjs vite-plugin-mock@2.9.6 -D     // 安装新版本

---

三、在项目根目录下创建 mock 文件夹，mock 文件夹下创建 user.ts 文件（ 文件名可自定义 ）

function createUserList(){

  return [

    {
      userId:1,
      avatar:'../src/assets/image/man.png',   // 头像
      username:'admin',   // 用户名
      password:'111111',   // 用户密码
      desc:'平台管理员',   //角色
      roles:['平台管理员'],
      buttons:['cuser.detail'],   // 按钮权限
      routes:['home'],   // 路由权限
      token:'Admin Token',
    },
    {
      userId:2,
      avatar:'../src/assets/image/man.png',   // 头像
      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 } = checkUser
      return { code :200 ,data:{ token } }

    },
  },

  // 获取用户信息假接口
  {
    url:'/api/user/info',    // 请求地址
    method:'get',
    response:(request)=>{

      // 获取请求头携带的 token
      const 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 } }

    },
  },

]

---

四、配置完成后可在页面进行测试。

<template>

  <h1>哈哈哈</h1>


</template>

<script setup lang="ts">


// 测试 mock
import axios from 'axios'   // 引入axios
axios({
  url:'/api/user/login',
  method:"post",
  data:{
    username:'admin', 
    password:'111111', 
  }
})


</script>

<style scoped lang="scss">

</style>

网页上即可看见发送的请求