vue.js 2.x本地模拟数据(配置webpack.dev.c

本机vue版本2.9.6
我们在开发前端时，由于后端服务还没写好，往往需要本地配置假数据进行调试，vue旧版本请求本地数据在dev-server.js里配置，而新版本的vue-webpack-template剔除了dev-server.js，因此配置本地数据在webpack.dev.conf.js里。

配置方法如下：

• 首先找到webpack.dev.conf.js文件，在const portfinder = require(‘portfinder’)后添加

var glob = require('glob');
const express = require('express')
const app = express()
var apiRoutes = express.Router()
var appData = require('../moker/v1/config') //config.js位置
var getApi= appData['get'];//所有的get请求
var postApi= appData['post'];//所有的post请求

//查找所有的json文件
var entryJS = {};
entryJS = glob.sync('./moker/v1/phone/*.json').reduce(function (prev, curr) {
  prev[curr.slice(7)] = '.'+curr;
  return prev;
}, {});

//合并所有的json文件到一个json中
let jsonData={};
for (var i in entryJS){
  let data = require(entryJS[i]);
  jsonData = Object.assign(jsonData, data);
}

app.use('/', apiRoutes)

• 然后在devServer里面添加

before (app) {
        //get
        for(var i = 0;i < getApi.length; i++){
          var getData = jsonData;
            app.get(getApi[i].url, function (req, res) {
            res.json(getData);
          });
        }
        //post
        for(var i = 0;i < postApi.length; i++){
          var postData = jsonData;
          app.post(postApi[i].url,function (req, res) {
            res.json(postData);
          });
        }
      }

• 然后添加config.js文件配置引入入口

var data = {
    "get" : [
        {
            "url" : "/api/phonelose",
            "key" : "phonelose"
        }
    ],
    "post" : [
        {
            "url" : "",
            "key" : ""
        }
    ]
};
module.exports = data;

• 之后就可以配置axios访问本地模拟数据了

  此处需要先安装axios和s6-promise

cnpm instll axios 
cnpm instll axios