vue vue-cli的同源环境下的mock数据，无需下载其他依赖，使用node和express

工具：node，express

vue正常而言脚手架搭建的前端项目会包含这两个依赖，以vue-cli搭建的项目为例：

1.修改webpack在dev开发模式下的devServer(没有after的话就自己加)

devServer.after 

function (app, server)

在服务内部的所有其他中间件之后， 提供执行自定义中间件的功能。

const apiMock = require('./apiMock')


devServer: {
   after: apiMock('../mock')
}

a、在同级目录（build）下新建一个apiMock.js文件（编写读取本地文件的node代码）

 

b、在根目录下新建mock文件夹：用来存放我们的mock数据  .json等不同格式的文件

2.  编写apiMock.js文件的代码

使用的技术是node.js中的path、express中的路由功能

下面的dir的值就是

after: apiMock('../mock')中'的../mock'，它指的是一个相对路径，指向用来存放mock数据的那个文件夹

app.use()的用法请参考express 的app.use()用法，不过我这么写大概才猜到应该怎么写了吧

const path = require('path');
module.exports = dir => {
  let apiDir = path.join(__dirname, dir);
  return (app) => {
    const handler = (dirSplit) => {
      return (req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*');
          let queryStr = req.originalUrl.split(dirSplit);
          let fileNameStr = queryStr.length === 2 ? queryStr[1].split('?')[0] : '';
          if (fileNameStr) {
            let fileDir = path.join(apiDir, dirSplit, fileNameStr + '.json');
            setTimeout(() => {
              res.sendFile(fileDir, function (err) {
                if (err) {
                  res.status(err.status).end();
                }
              });
            }, 1000);
          }
      }
    }
    app.use('/customer/*', handler('/customer/'))
    app.use('/addressSet/*', handler('/addressSet/'))
    app.use('/log/*', handler('/log/'))
  }
}

3.  来看看mock文件夹

文件夹的路径就是url路径，如：www.xxx.com/home/ccc

那么，新建文件夹home，注册路由app.use('/home/*, handler(''/home/)')

然后在home文件夹里面新建ccc.json文件，里面存放需要mock的数据即可

4.  请求这个地址

把请求的地址切换成本地的localhost（端口）,最好做一层封装，封装一下axios的请求，增加一个配置参数

来修改使用哪个请求地址。

5.来看看效果吧