封装mock

在mock目录下新建mock-server.js

const chokidar = require('chokidar')
const bodyParser = require('body-parser')
const chalk = require('chalk')
const path = require('path')
const Mock = require('mockjs')

const mockDir = path.join(process.cwd(), 'mock')

function registerRoutes(app) {
	let mockLastIndex
	const {
		mocks
	} = require('./index.js')
	const mocksForServer = mocks.map(route => {
		return responseFake(route.url, route.type, route.response)
	})
	for (const mock of mocksForServer) {
		app[mock.type](mock.url, mock.response)
		mockLastIndex = app._router.stack.length
	}
	const mockRoutesLength = Object.keys(mocksForServer).length
	return {
		mockRoutesLength: mockRoutesLength,
		mockStartIndex: mockLastIndex - mockRoutesLength
	}
}

function unregisterRoutes() {
	Object.keys(require.cache).forEach(i => {
		if (i.includes(mockDir)) {
			delete require.cache[require.resolve(i)]
		}
	})
}

// for mock server
const responseFake = (url, type, respond) => {
	return {
		url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
		type: type || 'get',
		response(req, res) {
			console.log('request invoke:' + req.path)
			res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
		}
	}
}

module.exports = app => {
	app.use(bodyParser.json())
	app.use(bodyParser.urlencoded({
		extended: true
	}))

	const mockRoutes = registerRoutes(app)
	var mockRoutesLength = mockRoutes.mockRoutesLength
	var mockStartIndex = mockRoutes.mockStartIndex

	// watch files, hot reload mock server
	chokidar.watch(mockDir, {
		ignored: /mock-server/,
		ignoreInitial: true
	}).on('all', (event, path) => {
		if (event === 'change' || event === 'add') {
			try {
				app._router.stack.splice(mockStartIndex, mockRoutesLength)

				unregisterRoutes()

				const mockRoutes = registerRoutes(app)
				mockRoutesLength = mockRoutes.mockRoutesLength
				mockStartIndex = mockRoutes.mockStartIndex

				console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
			} catch (error) {
				console.log(chalk.redBright(error))
			}
		}
	})
}

mock/index.js

const Mock = require('mockjs')
const { param2Obj } = require('./utils')

const user=require('./user')
const mocks = [
	...user
]

function mockXHR() {
  // mock patch
  // https://github.com/nuysoft/Mock/issues/300
  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
  Mock.XHR.prototype.send = function() {
    if (this.custom.xhr) {
      this.custom.xhr.withCredentials = this.withCredentials || false

      if (this.responseType) {
        this.custom.xhr.responseType = this.responseType
      }
    }
    this.proxy_send(...arguments)
  }

  function XHR2ExpressReqWrap(respond) {
    return function(options) {
      let result = null
      if (respond instanceof Function) {
        const { body, type, url } = options
        // https://expressjs.com/en/4x/api.html#req
        result = 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))
  }
}

module.exports = {
  mocks,
  mockXHR
}

mock/user.js

const tokens = {
  admin: {
    token: 'admin-token'
  },
  editor: {
    token: 'editor-token'
  }
}

const users = {
  'admin-token': {
    roles: ['admin'],
    introduction: 'I am a super administrator',
    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
    name: 'Super Admin'
  },
  'editor-token': {
    roles: ['editor'],
    introduction: 'I am an editor',
    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
    name: 'Normal Editor'
  }
}

module.exports = [
  // user login
  {
    url: '/user/login',
    type: 'post',
    response: config => {
      const { username } = config.body
      const token = tokens[username]

      // mock error
      if (!token) {
        return {
          code: 60204,
          message: 'Account and password are incorrect.'
        }
      }

      return {
        code: 20000,
        data: token
      }
    }
  },

  // get user info
  {
    url: '/user/info\.*',
    type: 'get',
    response: config => {
      const { token } = config.query
      const info = users[token]

      // mock error
      if (!info) {
        return {
          code: 50008,
          message: 'Login failed, unable to get user details.'
        }
      }

      return {
        code: 20000,
        data: info
      }
    }
  },

  // user logout
  {
    url: '/user/logout',
    type: 'post',
    response: _ => {
      return {
        code: 20000,
        data: 'success'
      }
    }
  }
]

vue.config.js

'use strict'
module.exports = {
	devServer: { // 配置本地启动服务
		port: process.env.port || process.env.npm_config_port || 8080, // 启动端口
		open: false, // 启动服务默认打开浏览器
		overlay: { // 出现错误或警告时,浏览器全屏覆盖
			warnings: false,
			errors: true
		},
		before: require('./mock/mock-server.js') // 服务启动之前做处理
	},
}

main.js

if (process.env.NODE_ENV === 'development') {
	const {
		mockXHR
	} = require('../mock')
	mockXHR()
}

created() {
		axios.post('/user/login',{username:'admin'}).then(res=>{
			console.log(res);
		})