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

摘要：在其的下面增加以下代码代码为在根目录下创建存放模拟的数据文件我命名为，名字可以根据自己口味定义，但是要跟第一步的配置依赖要一样。数据存放文件也需要更改为为请求的地址，为查询数据的入口请求请求欧了

早期在vue构建工程文件在build里面有dev-server.js，但是后来构建去除了该文件集成到了webpack的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)

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

在其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);
        });
      }
    }

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

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

到这个时候，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;

欧了