在 vue 或 react 项目中使用 mockjs 搭建 mock server

有时候，在公司里一些项目开发前，后端接口没那么快给到前端时，前端可以先跟后端约定好各个接口的请求路径、请求参数以及返回数据格式，先整理出一份接口文档，这样前端可以通过mockjs参考接口文档，自己先模拟数据，写业务代码，等待后端准备好，再用后端真实的接口数据替换自己写模拟数据，实现前后端同时开发。

一、在Vue中的使用

1、安装mock.js

npm i  mockjs -D

2、新建mock文件夹

在项目的根目录下新建mock文件夹（打包记得删除，或者使用码云托管代码，用.gitignore忽略掉），在文件夹下新建index.js文件

// mock/index.js// 引入mockjs
import Mock from 'mockjs';  // 拦截请求，模拟接口url和数据
Mock.mock("/api/list", "get", {message: "success",code: 200,data: {name: "xxx"}
})//带参数
/* 
post参数，option前端请求的数据，option.url请求的地址
option.type 请求的方式
option.body请求的字符参数（需要JSON.parse转对象）
*/
Mock.mock("/api/list2/", "post", function (option) {return {code: 0,msg: "参数成功",data: {title: "信息标题",content: "内容",...JSON.parse(option.body),},};
});

3、在开发环境下，引入mock

在配置文件 .env.development 里配置mock开启的标示

// .env.developmentNODE_ENV = development
VUE_APP_MOCK = true

在main.js中，判断是开发环境且有开启mock的标示时，引入mock 

// main.js// 判断配置文件里，mock是否要开启
if(process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK = true){import "./mock/index.js"
}

4、在具体业务逻辑里使用

// 引入axios
import axios from "axios"// /接口地址与拦截地址要一致
axios.get("/api/list/").then(res => {console.log('res', res)
})//带参数
axios.post("/api/list2/", { id: 111, key: "xxx" }).then(res => {console.log("带参数", res);
});

二、在react中使用

1、安装mock.js

npm i  mockjs -D

2、新建mock文件夹

在项目的根目录下新建mock文件夹（打包记得删除，或者使用码云托管代码，用.gitignore忽略掉），在文件夹下新建index.js文件

// mock/index.js// 引入mockjs
import Mock from 'mockjs';  // 拦截请求，模拟接口url和数据
Mock.mock("/api/list", "get", {message: "success",code: 200,data: {name: "xxx"}
})//带参数
/* 
post参数，option前端请求的数据，option.url请求的地址
option.type 请求的方式
option.body请求的字符参数（需要JSON.parse转对象）
*/
Mock.mock("/api/list2/", "post", function (option) {return {code: 0,msg: "参数成功",data: {title: "信息标题",content: "内容",...JSON.parse(option.body),},};
});

3、在开发环境下，引入mock

在配置文件 .env.development 里配置mock开启的标示

// .env.developmentNODE_ENV = development
REACT_APP_MOCK = true

判断是开发环境且有开启mock的标示时，引入mock 

if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_MOCK === true) {// import "./mock/index.js"require('./mock/index.js')
}

4、在具体业务逻辑里使用

// 引入axios
import axios from "axios"// /接口地址与拦截地址要一致
axios.get("/api/list/").then(res => {console.log('res', res)
})//带参数
axios.post("/api/list2/", { id: 111, key: "xxx" }).then(res => {console.log("带参数", res);
});

三、使用webpack来配置mockjs

除了上面的常规引入mockjs，我们也可以使用以webpack的形式来配置mockjs。

1、vue.config.js中引用

注意：webpack新版本中间件发生了变化，before与after已经不能使用，代替的onBeforeSetupMiddleware 与 onAfterSetupMiddleware 也要废弃，合二为一成为了setupMiddlewares，setupMiddlewares 代替了 before与after，所以mockjs在配置时也发生了变化。

1.1 新版本写法 

// mock/useInfo.json{"id": "@id()","username": "@cname()","date": "@date()","avatar": "@image('200x200','red','#fff','avatar')","description": "@paragraph()","ip": "@ip()","email": "@email()"
}

mock/index.js部分，主要就是devServer.app.get变成了middlewares.unshift

// mock/index.jsconst fs = require('fs')
const path = require('path')
const Mock = require('mockjs')/*** @param {string} filePath*/
function getJsonFile(filePath) {// 读取指定的json文件let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')// 解析并返回return json
}//重点部分，middlewares就是新增加的，原本只有devServer。
module.exports = function (middlewares, devServer) {// 判断要不要开启mockif(process.env.MOCK = true){//middlewares.unshift就是之前的before，middlewares.push是aftermiddlewares.unshift({name: 'mock',// `path` 是可选的path: '/api/test',middleware: (req, res) => {let json = getJsonFile('./mock/userinfo.json') //mock数据的样式，自己新建。res.send(Mock.mock(json))},})}//return别忘了return middlewares
}

vue.config.js部分变成了setupMiddlewares 

// vue.config.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,devServer: {setupMiddlewares: require('./mock/index.js'),},
})

1.2 老版本写法

onBeforeSetupMiddleware方式的配置：

// mock/index.jsconst fs = require('fs')
const path = require('path')
const Mock = require('mockjs')/*** @param {string} filePath*/
function getJsonFile(filePath) {let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')return json
}module.exports = function (devServer) {if(process.env.MOCK = true){devServer.app.get('/api/test', (req, res) => {let json = getJsonFile('./mock/userinfo.json')res.send(Mock.mock(json))})    }
}

目前的新版本还是可以用这个的，但是文档显示该配置项已弃用，以支持 devServer.setupMiddlewares 

// vue.config.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,onBeforeSetupMiddleware: {setupMiddlewares: require('./mock/index.js'),},
})

before方式的配置：

// mock/index.jsconst Mock = require('mockjs')
const fs = require('fs')
const path = require('path')// 用于被index.js进行调用
function getJsonFile (filePath) {// 读取指定的json文件const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')// 解析并返回console.log(json)return JSON.parse(json)
}module.exports = function (app) {if(process.env.MOCK = true){// get请求app.get('/api/test1', (rep,res) => {let json = getJsonFile('./mock/userInfo.json')res.json(Mock.mock(json))})// post请求app.post('/api/test2', (rep,res)=> {let json = getJsonFile('./mock/userInfo.json')res.json(Mock.mock(json))})}}

// vue.config.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({devServer: {before: require('./mock/index.js'),},
})

配置全部完成之后，就可以在需要的组建中使用

import axios from 'axios'axios.get('/api/test').then((res)=>{console.log('虚拟数据', res);
})

2、vite.config.ts中引用

有些项目是用vite这个前端构建工具构建的话，配置mockjs会有些区别。

安装 mockjs 和 vite-plugin-mock

npm i mockjs -D

npm i vite-plugin-mock -D

在vite.config.ts进行配置

// vite.config.tsimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入viteMockServe
import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({plugins: [vue(),viteMockServe({mockPath: "./mock/"}),]
})

vite-plugin-mock 中的配置内容的含义： 

supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件logger?:boolean; --是否在控制台显示请求日志mockPath?: string;  --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径ignore?: RegExp | ((fileName: string) => boolean);--读取文件时忽略指定格式的文件watchFiles?: boolean; --是否监视mockPath文件夹内文件的修改localEnabled?: boolean; --设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能ignoreFiles?: string[]; --读取文件时忽略的文件configPath?: string; --设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组prodEnabled?: boolean; --设置打包是否启用 mock 功能injectFile?: string; --如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.jsinjectCode?: string; --injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}

可以根据自己的项目需求，将以 VITE_XX 开头的变量定义在根目录中的 .env.development [ production | staging ] 文件中,分别对应 开发 [ 生产，测试 ] 环境

// .env.development# 前缀地址
VITE_BASE_URL = '/dev-api'# 请求路径
VITE_API_URL = 'http://192.168.x.x:8080'# MOCK开启的标示
VITE_BASE_MOCK = true

mock文件夹下的文件

// mock/index.jsexport * as userInfo from './userInfo'

// mock/userInfo.jsexport default [{url: "/api/test",method: "get",response: () => {return {code: 0,message: "ok",data: {'rows|10': [{id: '@guid',name: '@cname','age|20-30': 23,'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']}]},}}}
]

配置全部完成之后，就可以在需要的组建中使用

import axios from 'axios'axios.get('/api/test').then((res)=>{console.log('虚拟数据', res);
})

在生产环境使用

修改mock/index.js

// mock/index.jsimport { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'export function setupProdMockServer() {createProdMockServer([{url: "/api/getUsers",method: "get",response: () => {return {code: 0,message: "ok",data: {'rows|10': [{id: '@guid',name: '@cname','age|20-30': 23,'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']}]},}}}])
}

修改main.js

// main.jsimport { createApp } from 'vue'
import App from './App.vue'// 新增
import { setupProdMockServer } from '../mock/';if (process.env.NODE_ENV === 'production') {setupProdMockServer();
}createApp(App).mount('#app')

修改vite.config.ts

// vite.config.tsimport { defineConfig } from 'vite'
// 新增
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// 引入viteMockServe
import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({plugins: [vue(),viteMockServe({// defaultsupportTs: true,logger: false,mockPath: "./mock/",// 新增localEnabled: false, // 开发环境prodEnabled: true, // 生产环境设为true，也可以根据官方文档格式injectCode: ` import { setupProdMockServer } from './mock';setupProdMockServer(); `,watchFiles: true, // 监听文件内容变更injectFile: resolve("src/main.js"), // 在main.ts注册后需要在此处注入，否则可能报找不到setupProdMockServer的错误}),]
})

注意

每次修改mock文件夹下的文件，都必须重新启动服务才能生效。

参考资料

开始 | Vite 官方中文文档

Mock.js

起步 | Axios 中文文档 | Axios 中文网