vue3 / vite mock 数据

1、安装依赖

www.npmjs.com/package/vit…

pnpm install -D vite-plugin-mock mockjs

2、配置

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

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


// command 用于检测当前开发的环境
export default defineConfig(({ command })=>{
  return{
      plugins: [
          viteMockServe({
            localEnabled: command === 'serve',//保证开发阶段可以使用mock接口
          })
      ],

  }
}
)

3、mock文件

在根目录创建mock文件夹:去创建我们需要mock数据与接口！！！

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

4、安装axios

pnpm install axios

5、使用 在main.ts 入口文件 测试mock使用是否正常

import '@/styles/index.scss'
//测试代码:测试假的接口能否使用
import axios from 'axios'
//登录接口
axios({
  url: '/api/user/login',
  method: "post",
  data:{
    username: 'admin',
    password:'111111'
  }
  
})

6、补充 mock文件 内部代码

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

7、运行报错

检查一下依赖版本是否为2.9.6

pnpm install -D vite-plugin-mock@2.9.6