vue-cli配置mock进行请求测试

一、在build/webpack.dev.conf.js下：

1、在顶端'use strict'下添加，新加入的配置项如下：

'use strict'
// 新增项start
const express = require('express')
const app = express()


var appData = require(' ../data.json ')
var orders = appData.orders
// 新增项end

2、依然在当前文件下找到devServer:{}中添加配置项如下所示：

// these devServer options should be customized in /config/index.js
  devServer: {

 此处为原有的省略

 ……，

 //新增项start

   before(app) {     

        app.get('/api/orders', (req, res) => {

      res.json({

        errno:0,

        data:orders

      })

     })

}

    //新增项end

}，

二、制造假的数据

在第一步中，var appData = require(' ../data.json ') 可以看到，我们的data.json模拟数据，存放的路径是跟build目录同级，新建data.json其数据格式如下：

{
  "orders": {
    "all" : [
      { "orderNum":"254671684562665","state":1,"shopPrice":168,"marketPrice":228  },
      { "orderNum":"254671684562665","state":1,"shopPrice":168,"marketPrice":228  }
    ]
  }
}

记住：json的数据格式不能用单引号要严格按照json的数据格式走，键值对都用双引号；否则会报错，亲.

三、http://localhost:8080/api/orders在浏览器中查看：

注意：如果你的浏览器默认是：http://localhost:8080/#/,可以在route路由中配置如下选项，会去掉/#/：