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;

歐了