如果想要了解mock模拟数据的话，请看这篇文章（）

在实际应用场景中，总感觉mock数据比较麻烦，并且在webpack3中mock数据的代码在正式环境并不能自动移除掉，导致正式环境有mock相对应的代码，但是在webpack4中，会使用 tree shaking插件会自动移除掉未使用到的代码的，想要了解tree shaking(),请看这篇文章。所以为了兼容webpack版本的话，研究了一种新的方式来模拟后台接口数据，使用webpack中的 devServer.before这个配置即可，详细请看如下介绍。

在讲解如何模拟数据之前，我们来看下我目前整个项目架构如下：

### 目录结构如下：demo1                                       # 工程名|   |--- dist                               # 打包后生成的目录文件             |   |--- node_modules                       # 所有的依赖包|   |--- app|   | |---index|   | | |-- views                           # 存放所有vue页面文件|   | | | |-- parent.vue                    # 父组件|   | | | |-- child.vue                     # 子组件|   | | | |-- index.vue|   | | |-- components                      # 存放vue公用的组件|   | | |-- js                              # 存放js文件的|   | | |-- store                           # store仓库|   | | | |--- actions.js|   | | | |--- mutations.js|   | | | |--- state.js|   | | | |--- mutations-types.js|   | | | |--- index.js|   | | |-- app.js                          # vue入口配置文件|   | | |-- router.js                       # 路由配置文件|   |--- views|   | |-- index.html                        # html文件|   |--- json                               # 存放所有模拟数据|   | |-- parent_getPower.json|   | |-- parent_reConfig.json|   | |-- parent_reconlist.json|   | |-- parent_reGroup.json |   |--- mock.js                            # mock 数据的所有调用方法|   |--- webpack.config.js                  # webpack配置文件 |   |--- .gitignore  |   |--- README.md|   |--- package.json|   |--- .babelrc                           # babel转码文件

项目的结构如上所示：其中 json 文件夹内会存放所有模拟的数据，比如和开发后台约定好的数据，我可以直接把数据复制到json文件内，比如我们简单的看下 parent_reConfig.json 数据代码如下(假如开发接口返回的数据是这样的)：

{  "data": [{      "bTableName": "reconfig",      "businessCode": "reconfig",      "businessImportImpl": "reconfig",      "businessImportMethod": "reconfig",      "businessName": "reconfig"    }  ],  "code": 0}

其他的json文件也是类似的数据，这里不一一贴代码哦，有兴趣的话，可以到下面的github上查看demo。

json文件命名方式：比如我上面json下的叫 parent_reConfig.json, 因为vue页面叫 parent.vue, 所以前缀就是页面的名称，然后下划线(_) + reConfig + 'json', 其中reConfig 是接口的最后一个名字，这样命名的话，我一眼就可以知道是那个页面下的接口，接口是做什么使用的。方便以后接口很多更容易区分。

2. 在项目的根目录下 mock.js 代码是如下所示：

const getPower = require('./json/parent_getPower.json');const reConfig = require('./json/parent_reConfig.json');const reConList = require('./json/parent_reconlist.json');const reGroup = require('./json/parent_reGroup.json');function Mock(app) {  app.get('/xxxx/yyy', function(req, res) {    console.log('getPower111');    res.json(getPower);  });  app.post('/reconfig', function(req, res) {    console.log('reConfig111');    res.json(reConfig);  });  app.post('/conlist', function(req, res) {    console.log('reConList111');    res.json(reConList);  });  app.post('/regroup', function(req, res) {    console.log('reGroup111');    res.json(reGroup);  });}module.exports = Mock;

如上代码首先是把 json文件夹下的所有的json文件 require进来，然后定义一个函数，里面写所有的(get或post)方法，然后使用 res.json 方式就可以把上面的json数据模拟返回回来。如上的app参数是从webpack.config.js 配置传进来的。

3. webpack.config.js 配置方式如下：

// 引入mock.jsconst Mock = require('./mock.js');module.exports = {  devServer: {    port: 8082,    host: '0.0.0.0',    headers: {      'X-foo': '112233'    },    inline: true,    overlay: true,    stats: 'errors-only',    before: function(app) {      console.log(app);      if (process.env.NODE_ENV === 'mock') {        Mock(app);      }    }  },  plugins: [    // 设置环境变量信息    new webpack.DefinePlugin({      'process.env': {        NODE_ENV: JSON.stringify(process.env.NODE_ENV)      }    })  ]}

如上配置代码，首先引入 mock.js 进来，上面的mock.js对外返回函数，因此在devServer.before中配置调用下Mock函数，传入参数是app，并且环境变量也判断了下，如果是 mock环境，就执行mock函数代码的数据，否则不是mock命令的话，就不会执行mock数据，而是执行真正环境的数据。下面我们来看下 上面 before函数打印的app是什么东西，如下所示：

{ [EventEmitter: app]  domain: undefined,  _events: { mount: [Function: onmount] },  _maxListeners: undefined,  setMaxListeners: [Function: setMaxListeners],  getMaxListeners: [Function: getMaxListeners],  emit: [Function: emit],  addListener: [Function: addListener],  on: [Function: addListener],  prependListener: [Function: prependListener],  once: [Function: once],  prependOnceListener: [Function: prependOnceListener],  removeListener: [Function: removeListener],  removeAllListeners: [Function: removeAllListeners],  listeners: [Function: listeners],  listenerCount: [Function: listenerCount],  eventNames: [Function: eventNames],  init: [Function: init],  defaultConfiguration: [Function: defaultConfiguration],  lazyrouter: [Function: lazyrouter],  handle: [Function: handle],  use: [Function: use],  route: [Function: route],  engine: [Function: engine],  param: [Function: param],  set: [Function: set],  path: [Function: path],  enabled: [Function: enabled],  disabled: [Function: disabled],  enable: [Function: enable],  disable: [Function: disable],  acl: [Function],  bind: [Function],  checkout: [Function],  connect: [Function],  copy: [Function],  delete: [Function],  get: [Function],  head: [Function],  link: [Function],  lock: [Function],  'm-search': [Function],  merge: [Function],  mkactivity: [Function],  mkcalendar: [Function],  mkcol: [Function],  move: [Function],  notify: [Function],  options: [Function],  patch: [Function],  post: [Function],  propfind: [Function],  proppatch: [Function],  purge: [Function],  put: [Function],  rebind: [Function],  report: [Function],  search: [Function],  subscribe: [Function],  trace: [Function],  unbind: [Function],  unlink: [Function],  unlock: [Function],  unsubscribe: [Function],  all: [Function: all],  del: [Function],  render: [Function: render],  listen: [Function: listen],  request: IncomingMessage { app: [Circular] },  response: ServerResponse { app: [Circular] },  cache: {},  engines: {},  settings: {},  _eventsCount: 1,  locals:    { settings: {}},  mountpath: '/',  _router: {} }

更多关于 devServer.before可以看官网（）。

4. package.json 配置如下：

{  "scripts": {    "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",    "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",    "build:dll": "webpack --config webpack.dll.config.js",    "start": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",    "mock": "cross-env NODE_ENV=mock npm run start"  },}

5. app/index/views/parent.vue 代码如下所示：

如上代码，当我执行打包命令 npm run mock 时，就会调用webpack中的 devServer.before函数，该函数会判断当前的环境是否是mock命令，如果是mock命令就执行 mock.js中的Mock函数，然后会请求数据。

注意：上面的请求数据是：'//0.0.0.0:8082/reconfig' 这样的，这样就可以把 json/parent_reConfig.json请求的数据返回回来，但是我们真正的接口的前缀可能是 '//xxx.abc.com', 因此我们在配置所有的接口名称的时候，接口域名的前缀我们可以定义一个变量，然后传递进去。比如我下面是这样定义的：

// const prefix = '//xxx.abc.com'; // 真正的域名接口先注释掉

const prefix = '//0.0.0.0:8082';

我们可以简单的判断下：

let prefix;if (process.env.NODE_ENV === 'mock') {  prefix = '//0.0.0.0:8082'; // 测试域名} else {  prefix = '//xxx.abc.com'; // 正式域名}

const url = prefix + '/reconfig';

类似上面这中形式，因此当我们在页面上请求 this.$http.get(url);的时候，实际上在mock数据下请求的是 '//0.0.0.0:8082/reconfig' 这样的，因此会直接被 devServer.before中拦截到，因此会返回我们的模拟上的数据，但是在我们使用 npm run dev 或 npm run build 的时候，我们需要把 //xxx.abc.com 这个真正的接口域名前缀打开，'//0.0.0.0:8082' 需要被注释掉。就可以了，其他的vue中的代码不需要做任何改动，以前该怎么写，现在也还是就那么写。