如何改造vue-cli,将mockjs嵌入到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

//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()"
    }
}

//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

import Vue from ‘vue‘
import axios from ‘axios‘

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

export default http

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

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 = {};
        }   
      });
    }
  }
}