WEBPACK+VUE2.0开发请求本地模拟数据的配置方法

早期在vue构建工程文件在build里面有dev-server.js，但是后来构建去除了该文件集成到了webpack的webpack.dev.conf.js里面。 在项目制作过程中，作为一个前端，总不能时刻去调用后端的接口，需要模拟本地进行访问，于是总结一下模拟访问这里面的坑，希望对大家有帮助。

1.打开build下面的webpack.dev.conf.js文件进行配置

不多说 直接上代码：

代码为：

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

//查找所有的json文件
var entryJS = {};
entryJS = glob.sync('./data/**/*.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)

以上为第一个配置，具体引用是做什么的，大家可以自己百度下相关。

2.还是上述文件找到devServer对象。

在其watchOptions的下面增加以下代码：

代码为：

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

3.在根目录下创建存放模拟的数据文件

我命名为data，名字可以根据自己口味定义，但是要跟第一步的配置依赖要一样。

4.在data下面创建一个config.js目的是引入入口

url就是访问到后端接口地址，如果后端新加接口，在这里配置下入口，再新建一个json文件就妥妥的了。

5.下面这两个是模拟数据

到这个时候，npm run dev 后在浏览器里面输入接口地址应该可以打开了，如图：

有点小激动。但是还要完善后面的工作，这只是把服务搭好了，还要访问呢。

访问也是有步骤的：

在这里我用的是node的axios，没有用vue-axios，因为这个算是个插件，没必要用。在main.js里面增加：

import axios from ‘axios’
Vue.prototype.$http = axios

然后使用就可以了

 created () {
      // this.$http.get('/api/seller', {
      this.$http.post('/api/goods', {
        params: {
          appkey: 'appkey',
          pagenum: 1,
          pagesize: 20,
          sort: 'addtime'
        }
      }).then((res) => {
        console.log(res.data)
      }).catch((err) => {
        console.error(err)
      })
    }

整体就OK了，预祝开发大吉。

---

其实之前还有个坑，就是新版引入.CSS文件报错，老提示找不到postcss之类的，如图

Failed to compile.

./node_modules/css-loader?{“sourceMap”:false}!./node_modules/postcss-loader/lib?{“sourceMap”:false}!./node_modules/element-ui/lib/theme-chalk/index.css
Module build failed: Error: No PostCSS Config found in: /Users/liliang/workspace/zyb/teacher-ui-basic/node_modules/element-ui/lib/theme-chalk
at Error (native)
at /Users/liliang/workspace/zyb/teacher-ui-basic/node_modules/postcss-load-config/index.js:51:26
@ ./node_modules/element-ui/lib/theme-chalk/index.css 4:14-124 13:3-17:5 14:22-132
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

其实这个挺坑爹的，根据错误是根本没有办法解决的，后来，查询文档，最终解决了。

解决办法：

在根目录下面增加一个文件：postcss.config.js

如图：

文件内容为：

module.exports = { plugins: [ require(‘autoprefixer’)() ]}

自己安装下上面的依赖：

npm install autoprefixer –save-dev

然后再次重启服务，如果不OK，你心里骂我就好。

大功告成。

===============
经过项目后来的运用，又优化了下模拟数据请求：直接上代码(其他都不变)

第一部分

//new start
let glob = require('glob');
const express = require('express');
const app = express();
let apiRoutes = express.Router()
let appData = require('../data/config');
let getApi = appData['get'];//所有的get请求
let postApi = appData['post'];//所有的post请求

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

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

app.use('/', apiRoutes);
//new end

第二部分

 //new start
    before(app) {
      //get 第三版
      for (let i in getApi) {
        app.get(getApi[i], function (req, res) {
          res.json(jsonData[i]);
        });
      }

      for (let j in postApi) {
        app.post(postApi[j], function (req, res) {
          res.json(jsonData[j]);
        });
      }
    }
//new end

以上代码是webpack.dev.conf.js里配置。数据存放文件也需要更改为：

var data = {
  // url为请求的地址，key为查询数据的入口

  // get请求Api
  get: {
    seller: '/api/seller',
    goods: '/api/goods',
    tableList: '/api/tableList',
    strategyDetail: '/miscourse/shelfstrategy/shelfstrategydetail'
  },

  // post请求Api
  post: {
    goods: '/api/goods',
    strategyEdit: '/miscourse/shelfstrategy/shelfstrategyupdate',
    strategyAdd: '/miscourse/shelfstrategy/shelfstrategycreate',
    uploadfileimg: '/course/api/uploadfileimg'
  }
};

module.exports = data;

欧了