什么是mock
其中一个常见的场景是：
mockjs模拟所依赖后端HTTP响应（与后端约定了API响应，但是后端代码还没完成），来测试前端代码bug。
其中前端项目此时称为SUT(Software Under Test),mockjs扮演的角色是mock服务。
从头开始
从头开始使用vue3项目集成mockjs
1. 创建vue3 project
npm init vue@latest
2. 引入mockjs 和 axios
npm install mockjs --save-dev
npm install axios --save
npm i vite-plugin-mock cross-env -D
3. 修改package.json
这里切掉SUT<->依赖服务的联系，接通SUT<->Mock服务的链路。
{
"name": "vue-project",
"version": "0.0.0",
"scripts": {
"dev": "cross-env NODE_ENV=development vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
// omit by brevity
...
}
4. 加载mock服务
- vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { viteMockServe } from "vite-plugin-mock";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteMockServe(), // add mock support
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
5. 项目根目录创建mock文件夹
mkdir -p mock
touch mock/user.js
代码来自: juejin.cn/post/708496…
- user.js
//模拟返回10条用户信息
export default [
{
url: "/api/getUsers", //匹配到指定url
method: "get", //请求类型
response: () => {
return {
code: 0,
message: "ok",
data: { //需要返回的参数
"list|10": [
{
id: "@natural(100,200)", //100-200之间的随机整数
city: "@county(true)", //随机省市区
"moblie|1": [ //数组中的号码随机返回一个
"13531544954",
"13632250649",
"15820292420",
"15999905612",
],
name: "@cname", //随机返回名字
state: "@integer(0,1)", //随机返回0/1(用户性别)
"company|1": [ //与手机号码同理
"广州某有限公司",
"深圳某有限公司",
"佛山某有限公司",
"惠州某有限公司",
],
"address|1": [
"中山路3号",
"教育路10号",
"民兴路9号",
"北京路23号",
],
},
],
},
};
},
},
];
- App.vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
onMounted(() => {
//实际开发过程中建议对api进行封装 搭配async/await使用
axios.get(`/api/getUsers`)
.then((res) => {
console.log("res ----->", res.data.data);
})
.catch((err) => {
console.log(err);
});
});
</script>
<template>
</template>
<style scoped>
</style>
此时控制台应该显示加载了mock文件，它默认会读取mock下全部子文件夹：
