vue使用mock

3、index.js 模拟数据的导入导出，路由批量注册，以及公用逻辑实现，同时兼容了Mock和中间件的使用

import Mock from 'mockjs'import { param2Obj } from '../src/utils'import article from './article'const mocks = [...article]export function mockXHR() {Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.sendMock.XHR.prototype.send = function() {if (this.custom.xhr) {this.custom.xhr.withCredentials = this.withCredentials || falseif (this.responseType) {this.custom.xhr.respOnseType= this.responseType}}this.proxy_send(...arguments)}function XHR2ExpressReqWrap(respond) {return function(options) {let result = nullif (respond instanceof Function) {const { body, type, url } = optiOnsresult= respond({method: type,body: JSON.parse(body),query: param2Obj(url)})} else {result = respond}return Mock.mock(result)}}for (const i of mocks) {Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))}}const respOnseFake= (url, type, respond) => {return {url: new RegExp(`/mock${url}`),type: type || 'get',response(req, res) {res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))}}}export default mocks.map(route => {return responseFake(route.url, route.type, route.response)})

4、mock-serve中间件逻辑实现分两部分进行讲述，第一节是路由的批量注册，第二节是文件监听实现自动重启服务

// 监听文件或文件夹的变化const chokidar = require('chokidar')// 处理程序之前，在中间件中对传入的请求体进行解析const bodyParser = require('body-parser')// 输出不再单调,添加文字背景const chalk = require('chalk')// 处理文件路径const path = require('path')const mockDir = path.join(process.cwd(), 'mock')function registerRoutes(app) {let mockLastIndexconst { default: mocks } = require('./index.js')for (const mock of mocks) {app[mock.type](mock.url, mock.response)mockLastIndex = app._router.stack.length}const mockRoutesLength = Object.keys(mocks).lengthreturn {mockRoutesLength: mockRoutesLength,mockStartIndex: mockLastIndex - mockRoutesLength}}function unregisterRoutes() {Object.keys(require.cache).forEach(i => {if (i.includes(mockDir)) {delete require.cache[require.resolve(i)]}})}// 请求→响应头解析→注册监听逻辑→清除缓存→响应服务module.exports = app => {require('@babel/register')app.use(bodyParser.json())app.use(bodyParser.urlencoded({extended: true}))const mockRoutes = registerRoutes(app)var mockRoutesLength = mockRoutes.mockRoutesLengthvar mockStartIndex = mockRoutes.mockStartIndex// watch files, hot reload mock serverchokidar.watch(mockDir, {ignored: /mock-server/,ignoreInitial: true}).on('all', (event, path) => {if (event === 'change' || event === 'add') {try {// remove mock routes stackapp._router.stack.splice(mockStartIndex, mockRoutesLength)// clear routes cacheunregisterRoutes()const mockRoutes = registerRoutes(app)mockRoutesLength = mockRoutes.mockRoutesLengthmockStartIndex = mockRoutes.mockStartIndexconsole.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`))} catch (error) {console.log(chalk.redBright(error))}}})}

5、main.js 当前运行环境判定挂载mock对象（mock-server只会在线下开发环境中使用）

import { mockXHR } from '../mock'if (process.env.NODE_ENV === 'development') {mockXHR()}

参考链接 https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#swagger