【精品】vite3+vue3 整合 mock.js

mockjs官网

安装插件

npm install mockjs --save-dev npm i vite-plugin-mock cross-env -D

方式一 第一步：修改vite.config.ts文件

第二步：页面发送Get请求

	hello world
	
	人都是会遗忘的，但这也忘记的太快，太彻底了！
	
	Plain



	import http from '@/utils/request';
	
	function fun() {
	  http.get("/rbacapi/permission/getById/3").then(res => {
	    console.log(res);
	  })
	}

第三步：创建mock文件User.ts

在src下创建mock文件夹，然后在其中创建user.ts文件：

方式一

export default [{
    type:'get',
    url:'/rbacapi/permission/getById/3',
    response: () => {
        return {
            code:200,
            msg:"ok",
            data:"hahaaha"
        }
    }
}]

方式二

import { MockMethod } from 'vite-plugin-mock'

export default [
    {
        url: '/rbacapi/permission/getById/3', // 注意，这里只能是string格式
        method: 'get',
        response: () => {
            return {
                code:200,
                msg:"ok",
                data:"xixixixixi"
            }
        }
    }
] as MockMethod[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档

方式三

import {MockMethod} from 'vite-plugin-mock'
import Mock from 'mockjs';
const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据

export default [
    {
        url: '/rbacapi/permission/getById/3', // 注意，这里只能是string格式
        method: 'get',
        response: () => {
            return {
                code: 200,
                msg: 'success',
                data: () => {
                    const data = {
                        id1: Random.guid(),
                        id2: Random.string(10),
                        idcard: Random.string('number', 8, 18),
                        name: Random.cname(),// 随机生成任意名称
                        loginname: Random.name(), // 生成姓名
                        birth: Random.date('yyyy-MM-dd'), //参数指定日期格式，也可以不指定
                        gender: Random.boolean,
                        country: Random.county(),
                        province: Random.province(),
                        homepage: Random.url(), // 生成web地址
                        intro: Random.cword(100, 160)
                    }
                    return data;
                },
            }
        },
    },
] as MockMethod[]; // 定义数据格式

结果

方式二

除了可以使用上面在vite.config.ts文件中配置的方式外，还可以不在这个文件中配置，而是在页面中需要mock文件时，手动引入，当然也可以在main.ts文件中集中引入（方便在产品环境中集中删除）。

第一步：在src/mock文件夹中创建文件Province.ts：

import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据

Mock.setup({//设置请求延时时间
    timeout: 1000
})

let category ={
    id:Random.guid(),
    name:"aaa",
    age:"bbb"
}

Mock.mock('/rbacapi/permission/getById/3', "get", category) //调用模拟数据方法

第二步：vue页面

  hello world
  
  人都是会遗忘的，但这也忘记的太快，太彻底了！
  
  Plain


  import http from '@/utils/request';
  import '@/mock/Product';  //引入mock文件
  
  function fun() {
    http.get("/rbacapi/permission/getById/3").then(res => {
      console.log(res);
    })
  }

结果