1、安装依赖：

npm i mockjs vite-plugin-mock --save-dev

npm i axios

!!!注意一个坑!!!：使用了vite-plugin-mock插件的时候，直接使用(mock配置都已经配置好，使用时)会出现一个问题，问题如下：

解决办法：在上述的问题文件中加上两句话即可，让vite识别require

import { createRequire } from 'module'
const require = createRequire(import.meta.url)

 2、在vite.confog.ts中进行配置 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


//mock模拟通道
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: './mock/',//设置模拟数据的存储文件夹
      //@ts-ignore
      supportTs: true,//是否读取ts文件模块
      logger:true,//是否在控制台显示请求日志
      localEnabled: true,//设置是否启用本地mock文件
      prodEnabled:true//设置打包是否启用mock功能
    })
  ]
})

3、在项目根目录下创建mock文件夹，并创建文件index.ts

//存放本地的mock文件
import mockjs from "mockjs";
import pkg from 'mockjs';
const { Random } = pkg;//这是mock生成数据的一种方式；不这样写，跑本地会出现关于require的问题
const { mock: Mock } = mockjs
/**
* 下面的数据生成，笔者使用了一种比较笨的方法，熟悉mock的同学可忽略-_-
*/
interface IInterface {
  url: string,
  method: string,
  response:Function
}

//用户数据
const userArray: any = []
for (let i = 0; i < 10; i++){
  userArray.push(mockjs.mock({
    "name": Random.cname(), //随机生成中文名字
    "age": Random.integer(18,40),//随机生成18-40的数字
    "birth": Random.date()//随机生成年月日
  }))
}

//商品数据
const goods: any = []
for (let i = 0; i < 10; i++) {
  goods.push(mockjs.mock({
    "name": Random.ctitle(),//随机生成标题
    "price": Random.integer(11, 400),//随机生成11-400的数字
    "sourceAddress": Random.county(true),//随机生成省市县级城市
    "image": Random.image('100x100'),//随机生成100*100的图片
    "num":Random.integer(1,100)//随机生成1-100的数字
  }))
}

// 房屋数据搞多点，模拟前端的分页查询
const houses:any = [],
  villageNo:number = 1
let id = 1
for (let i = 0; i < 30; i++) {
  houses.push(
    mockjs.mock({
      id: id++,
      energyNo: Random.string('number', 8), //供能户号
      villageNo: villageNo, // 小区编号
      villageName: '东方花园', // 小区名称
      energyState: Number(Random.boolean()), // 供能状态 0：供能中；1：报停；
      state: Random.integer(0, 2), // 房屋状态 0：正常；1：停用；2：删除
      createBy: Random.name(), // 创建人
      createTime: Random.datetime() // 创建时间
    })
  )
  houses[i].users = []
  for (let j = 0; j < Mock({ 'number|0-4': 0 }).number; j++) {
    const mouth = Mock({
      'number|1-12': 1
    }).number
    const day = Mock({
      'number|1-30': 11
    }).number
    houses[i].users.push(
      Mock({
        username: Random.name(), // 户主名称
        userNo:
          '320924' +
          String(
            Mock({
              'number|1980-2004': 1999
            }).number
          ) +
          (mouth < 10 ? '0' + mouth : String(mouth)) +
          (day < 10 ? '0' + day : String(day)) +
          Random.string('number', 4), // 户主身份证
        userPhone: Random.string('number', 11), // 户主手机号
        userState: Number(Random.boolean()) // 户主状态，0：正常，1：删除
      })
    )
  }
}

// 用户数据，获取用户信息
const userInfo:any = {
  firstName: Random.first(),
  lastName: Mock('@last'),
  avatar: Random.image('200x200', '#894FC4', '#FFF', 'png', '@')
}

const mock: Array<IInterface> = [ //这里应该是做拦截的方法api集合
    //拦截获取数据的请求
  {
    url: '/api/getData',
    method: 'get',
    response: () => {
      return {
        status: 200,
        message: 'success',
        data: userArray
      }
    }
  },
//拦截获取商品的请求
  {
    url: '/api/goods',
    method: 'get',
    response: () => {
      return {
        status: 200,
        message: 'success',
        data: goods
      }
    }
  },
    {
    url: '/api/houses',
    method: 'get',
    response: (a) => {
        console.log(a);// 结果为下图
      const page = a.query.page,
        size = a.query.size
      // 总数
      const total = Math.ceil(houses.length / size)
      let res_data = null
      if (page <= total) {
        res_data = houses.slice((page - 1) * size, (page - 1) * size + size)
      } else {
        res_data = '没有数据了1'
      }
      return {
        status: 200,
        message: 'success',
        data: res_data,
        total
      }
    }
  },
{
    url: '/api/userInfo',
    method: 'get',
    response: ({ query }) => {
      console.log(query)
      return {
        status: 200,
        message: 'success',
        data: userInfo
      }
    }
  }
]

export default mock //暴露，以便在src/main.ts中引入

上述“a”打印的结果。 

4、在src/main.ts中引入mock文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import "../mock/index"

createApp(App)
  .mount('#app')

5、使用axios获取本地mock数据：

（1）定义API方法

import axios from "axios";
const service = axios.create({
  baseURL: "/",
  timeout:20000
})

export const getData = (params?:any) => {
  return service({
    url: "/api/getData",
    method: "get",
    params
  })
}

export const getGoods = (params?: any) => {
  return service({
    url: "/api/goods",
    method: "get",
    params
  })
}

（2）在页面中使用

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
import { ref } from "vue";
interface IGoods {
  num: number,
  price: number,
  sourceAddress: string,
  name: string,
  image: string
}
let goods1 = ref<Array<IGoods>>([])

//调用mockapi
import { getData, getGoods } from "./api/index"

const getList = (params?: any) => {
  getData(params).then((res: any) => {
    console.log(res)
  })
}

const goods = () => {
  getGoods().then(res => {
    console.log(res)
    goods1.value = res.data.data
    console.log(goods1)
  })
}
</script>

<template>
  <van-button type="danger" @click="getList">获取数据</van-button>
  <van-button type="default" @click="goods">获取商品</van-button>
</template>

<style scoped></style>

6、实现的效果：

（1）点击获取数据按钮：

 （2）点击获取商品按钮：