前情提要：前端在开发页面请求接口取数据时，如果后端还未提供接口，我们就可以使用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
