结合webpack的开发环境mock方式一、二

一、在webpack中监听地址或者端口号：
优点：
1、不需要嵌入业务代码中，只需要配置devServer.
2、由于是配置式，很方便变化开发主机，无影响生产代码。
缺点：需要额外起mock服务器

 devServer: { // DevServer 相关的配置
        proxy: { // 代理到后端服务接口
            '/api': 'http://localhost:3000'
        },
       proxy: {
            "/api": {
             target: "https://other-server.example.com",
            secure: false   //排除对https的检测。
         }
       },
}

二、另起mock server.js以及相应返回数据josn

/**
 * Mock server
 */
require('./read-env')()
const path = require('path')
const express = require('express')
const klaw = require('klaw')
const _ = require('lodash')
const bodyParser = require('body-parser')

const methodFlag = ['$get', '$post'] // 请求方法
const mockDir = path.join(process.cwd(), 'mocks')

const routers = {

}
const mockFiles = []

let err

klaw(mockDir) 
  .on('data', (file) => {
    if (path.extname(file.path) !== '.js') return
    mockFiles.push(file.path)
  })
  .on('end', () => {
    mockFiles.forEach((file) => {
      try {
        const router = require(file) // require mock文件夹下的文件
        Object.assign(routers, router)
      } catch (error) {
        err = error
        console.log(err)
      }
    })
    server(routers)
  })

function server (routers) {
  const app = express()

  const allowCrossDomain = function (req, res, next) {
    // 允许跨域
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With')
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS')
    next()
  }
  app.use(allowCrossDomain)
  // 处理请求体
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({ extended: false }))

  Object.keys(routers).forEach(function (api) {
    const routeHander = routers[api]
    const routerInst = new express.Router()

    if (_.isFunction(routeHander)) {
      routerInst.use(api, routeHander)
    } else if (_.isObject(routeHander)) {
      // 如果存在$get/$post
      if (methodFlag.some(it => {
        return routeHander[it]
      })) {
        methodFlag.forEach(it => {
          const method = it.toLocaleLowerCase().replace('$', '')
          if (routeHander[it]) {
            if (_.isFunction(routeHander[it])) {
              routerInst[method](api, routeHander[it])
            } else if (routeHander[it]) {
              routerInst[method](api, (req, res, next) => {
                responseTo(res, api, method, routeHander[it])
                next()
              })
            }
          }
        })
      }
    }
    app.use('/', routerInst)
  })

  if (err) {
    app.use((req, res, next) => {
      return next(err)
    })
  }

  app.listen(process.env.PROXY_TARGET, () => {
    console.log(`Proxy at http://localhost:${process.env.PROXY_TARGET}`)
  })
}

function responseTo (res, api, method, data) {
  console.log(`${api}  ${method}`)
  res.json(data)
}

server对应的返回mock数据如下：

module.exports = {
  '/wechat/checktime.do': {
    '$post': {
      'flag': '1',
      // 访问失败原因
      'msg': '',
      'data': {
        'checkResult': 'Y'
      }
    }
  }
}

第二种mock方式；

PS: 另外一种是 利用切面式方式 劫持请求函数。详情见我的另一文章：
uniapp 使用mock数据方式总结

优点：

1、嵌入代码有点多。
1.代码片段：

//若是开发环境则 是调用拦截，否则，将原来fetch原封不动，给到Vue.prototype.$fetch .
if( process.env && process.env.NODE_ENV === 'development'){
      // 这里调用拦截之前封装的fetch请求 fetch.before。
    Vue.prototype.$fetch = fetch.before( function(){
        return true;
    })
}else{
    Vue.prototype.$fetch = fetch
}