vue.js 2.x本地模拟数据(配置webpack.dev.conf.js方式)

本机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 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容