本機(jī)vue版本2.9.6
我們?cè)陂_發(fā)前端時(shí)，由于后端服務(wù)還沒寫好，往往需要本地配置假數(shù)據(jù)進(jìn)行調(diào)試，vue舊版本請(qǐng)求本地?cái)?shù)據(jù)在dev-server.js里配置，而新版本的vue-webpack-template剔除了dev-server.js，因此配置本地?cái)?shù)據(jù)在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請(qǐng)求
var postApi= appData['post'];//所有的post請(qǐng)求

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

//合并所有的json文件到一個(gè)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訪問本地模擬數(shù)據(jù)了

  此處需要先安裝axios和s6-promise

cnpm instll axios 
cnpm instll axios