vue3使用mock创建后台模拟数据

---

前情提要：前端在开发页面请求接口取数据时，如果后端还未提供接口，我们就可以使用mock生成一些模拟数据来测试前端页面，可以节省很多时间等。

采用mockJs进行模拟数据，模拟各种场景（get、post）生成接口，官网地址：Mock.js (mockjs.com)

一、安装mockjs和依赖vite-plugin-mock

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

二、在配置 vite.config.js 文件中配置vite-plugin-mock的使用

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from "vite-plugin-mock";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        viteMockServe({
            mockPath: "mock", // 设置模拟数据的存储文件夹
            localEnabled: true, //设置是否启用本地mock文件
        })
    ]
})

三、在根目录下创建mock/index.js文件，具体内容如下：

import Mock from 'mockjs'
const arr = []
for (let i = 0; i < 10; i++) {
    arr.push({
        id: Mock.mock("@id"),
        name: Mock.mock("@cname"),
        'age|18-60': 1,
        date: Mock.mock("@date('yyyy-MM-dd')"),
        email: Mock.mock("@email"),
        city: Mock.mock("@city(true)")
    })
}

export default [{
    url: '/list',
    methods: 'get',
    response: () => {
        return arr
    }
}]

四、调用接口数据，并渲染到页面

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const tableList = ref([])
const getList = async () => {
  const res = await axios.get('/list')
  tableList.value = res.data
}
onMounted(() => getList())

</script>

<template>
  <el-table :data="tableList" style="width: 100%">
    <el-table-column prop="id" label="ID" width="200" />
    <el-table-column prop="name" label="姓名" width="80" />
    <el-table-column prop="age" label="年龄" width="80" />
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="email" label="邮箱" width="280" />
    <el-table-column prop="city" label="城市" width="180" />
  </el-table>
</template>

<style scoped>
</style>

发现报错if (!require.cache) { ^ReferenceError: require is not defined}，并且没有找到这个/list接口

解决方法：在node_modules/vite-plugin-mock/dist/index.mjs这个文件中做如下配置：

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

接口请求成功了：

屏幕截图 2023-09-22 153927.png

数据渲染成功

屏幕截图 2023-09-22 154010.png