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

早期在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;

歐了