如何改造vue-cli,將mockjs嵌入到webpack

最近准備開發一款 web app，是前后端並行開發的場景，因此需要 mock 一些數據，但是 vue 官網上發現沒有跑在webpack上的例子。

案例數據來自網上。

 

一、安裝 vue 腳手架並初始化 webpack 項目

    //全局安裝 vue-cli
    npm install vue-cli -g
    //創建一個基於 webpack 模板的新項目
    vue init webpack mock-server-demo
    //切換至mock-server-demo目錄
    cd mock-server-demo

二、安裝依賴

    //我們使用axios來發起http請求
    npm install axios --save
    //安裝依賴mockjs
    npm install mockjs --save-dev

三、在項目根路徑下創建mock文件夾

       3-1  新建一個 index.js 文件，公共一個 get  請求

       3-2  新建一個 util.js 文件，用來讀取指定的 json 文件

       3-3  新建一個 userInfo.json 文件，用來保存隨機生成的一些數據

//index.js
const Mock = require('mockjs');//mockjs 導入依賴模塊
const util = require('./util');//自定義工具模塊
//返回一個函數
module.exports = function(app){
    //監聽http請求
    app.get('/user/userinfo', function (rep, res) {
        //每次響應請求時讀取mock data的json文件
        //util.getJsonFile方法定義了如何讀取json文件並解析成數據對象
        var json = util.getJsonFile('./userInfo.json');
        //將json傳入 Mock.mock 方法中，生成的數據返回給瀏覽器
        res.json(Mock.mock(json));
    });
}


//util.js
const fs = require('fs');//引入文件系統模塊
const path = require('path');//引入path模塊

module.exports = {
    //讀取json文件
    getJsonFile:function (filePath) {
        //讀取指定json文件
        var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
        //解析並返回
        return JSON.parse(json);
    }
};

//userInfo.json
{
    "error":0,
    "data":{
        "userid": "@id()",
        "username": "@cname()",
        "date": "@date()",
        "avatar": "@image('200x200','red','#fff','avatar')",
        "description": "@paragraph()",
        "ip": "@ip()",
        "email": "@email()"
    }
}

 

 

四、使用 webpack-dev-server 搭建 web server ，響應 http 的請求

webpack 官網中說 webpack-dev-server 能夠用於快速開發應用程序。web server不需要自己搭建或者另外安裝依賴,在webpack-dev-server中已經封裝好了,我們只需要直接那過來用就可以了。在路徑 build/webpack.dev.conf.js 文件中的 devServer 屬性中新添加一個before 鈎子函數,用來監聽來自web的http請求。

 

 

 

 

官網鏈接：https://www.webpackjs.com/configuration/dev-server/#devserver

devServer 是一個對象，有很多個屬性，用不同的屬性來改變其行為。通俗的講，devServer  就是開發過程中的一個服務器：

//devServer 為我們提供了開發過程中的服務器
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }

//想要提供靜態文件時使用，目的是告訴服務器從哪里提供內容，默認情況下，使用當前目錄作為提供內容的目錄
devServer.contentBase  

//devServer.after，在服務內部的所有其他中間件之后， 提供執行自定義中間件的功能。
devServer: {
    after: function(app) {
      // 做些有趣的事
    }
  }

//devServer.allowedHosts，此選項允許你添加白名單服務，允許一些開發服務器訪問。
devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com'
    ]
  }

//devServer.before，在服務內部的所有其他中間件之前， 提供執行自定義中間件的功能。
devServer: {
    before: function(app) {
      app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
  }

//devServer.compress，一切服務都啟用 gzip 壓縮：
devServer: {
    compress: true
  }

//devServer.host 指定使用一個 host。默認是 localhost。如果你希望服務器外部可訪問，本機IP訪問，指定如下：
devServer: {
    host: '0.0.0.0'
  }

//devServer.hot，啟用 webpack 的模塊熱替換特性
devServer: {
    hot: true
  }

//devServer.lazy 當啟用 lazy 時，dev-server 只有在請求時才編譯包(bundle)。這意味着 webpack 不會監視任何文件改動。我們稱之為惰性模式。
devServer: {
    lazy: true
  }

//devServer.historyApiFallback 當使用 HTML5 History API 時，任意的 404 響應都可能需要被替代為 index.html
devServer:{
    historyApiFallback: true
}

//devServer.https  默認情況下，dev-server 通過 HTTP 提供服務。也可以選擇帶有 HTTPS 的 HTTP/2 提供服務：
devServer:{
    https: true
}

//devServer.port 指定要監聽請求的端口號：
devServer:{
    port: 8080
}

//devServer.proxy 在 localhost:3000 上有后端服務的話，你可以這樣啟用代理：
devServer:{
    proxy: {
        "/api": "http://localhost:3000"
    }
}
//請求到 /api/users 現在會被代理到請求 http://localhost:3000/api/users

 

 

五、在瀏覽器中發起請求，獲取數據，在 App.vue 文件中使用 axios 發起http請求

　　5-1   在 src 目錄下新建 vue-axios 文件夾，給 Vue 添加 axios 原型，在調用時直接寫  this.axios ，非常方便

import Vue from 'vue'
import axios from 'axios'

const http = {
    install(){
        Vue.prototype.axios = axios;
    }
};

export default http

　　5-2   在 main.js 中將 vue-axios 綁定到 Vue 實例上

import axios from './vue-axios'
Vue.use(axios)

　　5-3  在 App.vue 上調用方法

export default {
  name: 'App',
  data(){
    return {
      userInfo:{}
    }
  },
  created(){
    this.getUserInfo();
  },
  methods:{
    getUserInfo(){
      // this.userInfo = null;
      this.axios.get('/user/userinfo')
      .then(({data})=>{
        if(data.error === 0){
          this.userInfo = data.data;
        }else{
          this.userInfo = {};
        }   
      });
    }
  }
}

 

GET:  http://localhost:8080/user/userinfo  200

測試 ok

 

 

六、報錯解決：

　　6.1  You may use special comments to disable some warnings.  由於vue對語法的限制過於嚴格，所以第一次編譯運行項目時一直失敗，查找原因解決辦法：在 build/webpack.base.conf.js 文件中，注釋或者刪除掉：module->rules中有關eslint的規則