摘要：在其的下面增加以下代碼代碼為在根目錄下創(chuàng)建存放模擬的數(shù)據(jù)文件我命名為，名字可以根據(jù)自己口味定義，但是要跟第一步的配置依賴要一樣。數(shù)據(jù)存放文件也需要更改為為請(qǐng)求的地址，為查詢數(shù)據(jù)的入口請(qǐng)求請(qǐng)求歐了

早期在vue構(gòu)建工程文件在build里面有dev-server.js，但是后來構(gòu)建去除了該文件集成到了webpack的webpack.dev.conf.js里面。 在項(xiàng)目制作過程中，作為一個(gè)前端，總不能時(shí)刻去調(diào)用后端的接口，需要模擬本地進(jìn)行訪問，于是總結(jié)一下模擬訪問這里面的坑，希望對(duì)大家有幫助。

不多說 直接上代碼：

代碼為：

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請(qǐng)求
var postApi= appData["post"];//所有的post請(qǐng)求

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

以上為第一個(gè)配置，具體引用是做什么的，大家可以自己百度下相關(guān)。

在其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，名字可以根據(jù)自己口味定義，但是要跟第一步的配置依賴要一樣。

url就是訪問到后端接口地址，如果后端新加接口，在這里配置下入口，再新建一個(gè)json文件就妥妥的了。

到這個(gè)時(shí)候，npm run dev 后在瀏覽器里面輸入接口地址應(yīng)該可以打開了，如圖：

有點(diǎn)小激動(dòng)。但是還要完善后面的工作，這只是把服務(wù)搭好了，還要訪問呢。

在這里我用的是node的axios，沒有用vue-axios，因?yàn)檫@個(gè)算是個(gè)插件，沒必要用。在main.js里面增加：

import axios from ‘a(chǎn)xios’
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了，預(yù)祝開發(fā)大吉。

其實(shí)之前還有個(gè)坑，就是新版引入.CSS文件報(bào)錯(cuò)，老提示找不到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

其實(shí)這個(gè)挺坑爹的，根據(jù)錯(cuò)誤是根本沒有辦法解決的，后來，查詢文檔，最終解決了。

在根目錄下面增加一個(gè)文件：postcss.config.js

如圖：

文件內(nèi)容為：

module.exports = { plugins: [ require(‘a(chǎn)utoprefixer’)() ]}

自己安裝下上面的依賴：

npm install autoprefixer –save-dev

然后再次重啟服務(wù)，如果不OK，你心里罵我就好。

大功告成。

===============
經(jīng)過項(xiàng)目后來的運(yùn)用，又優(yōu)化了下模擬數(shù)據(jù)請(qǐng)求：直接上代碼(其他都不變)

//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請(qǐng)求
let postApi = appData["post"];//所有的post請(qǐng)求

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

//合并所有的json文件到一個(gè)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里配置。數(shù)據(jù)存放文件也需要更改為：

var data = {
  // url為請(qǐng)求的地址，key為查詢數(shù)據(jù)的入口

  // get請(qǐng)求Api
  get: {
    seller: "/api/seller",
    goods: "/api/goods",
    tableList: "/api/tableList",
    strategyDetail: "/miscourse/shelfstrategy/shelfstrategydetail"
  },

  // post請(qǐng)求Api
  post: {
    goods: "/api/goods",
    strategyEdit: "/miscourse/shelfstrategy/shelfstrategyupdate",
    strategyAdd: "/miscourse/shelfstrategy/shelfstrategycreate",
    uploadfileimg: "/course/api/uploadfileimg"
  }
};

module.exports = data;

歐了