vue-cli2结合axios使用mock

一直没找到如何简便的配置mock，自己总结的配置流程。

0.我是用的是vue-cli2创建的项目,下边是创建后的目录

微信图片_20191225142619.png

mock文件夹是结构目录生成后创建的。

1.先将axios和mock下载下来

npm i axios --save
npm i --save-dev webpack mockjs-webpack-plugin

2.下载下来后找到src目录下的main.js引入axios

微信图片_20191225143707.png

import axios from 'axios'
Vue.prototype.$http = axios;

3.axios引入后开始配置mock如下图所示

微信图片_20191225144338.png

微信图片_20191225144525.png

//找到build下的webpack.dev.config.js引入mockjs-webpack-plugin
const MockjsWebpackPlugin = require("mockjs-webpack-plugin")
//配置plugins
    // 插件的功能是根据配置文件，起一个指定端口的server，将接口请求指向json文件
    new MockjsWebpackPlugin({
      // mock数据的存放路径
      path: path.join(__dirname, "../mock"),
      // 配置mock服务的端口，避免与应用端口冲突
      port: 3000
    })
devServer是在plugins外面的
  // 配置代理，这里的代理为webpack自带功能
  devServer: {
    // 应用端口，避免与mock服务端口冲突
    port: 5001,
    proxy: {
      // 配置匹配服务的url规则，以及其代理的服务地址，即mock服务的地址
      "/": "http://localhost:3000/"
    }
  }

4.然后在mock文件夹创建一个data.json文件(名字随意取)

/**
 * Json data file
 *
 * @url /data
 */
 {
    "code": 0,
    "result|5-10": [
      {
        "uid|+1": 1,
        "name": "@name",
        "email": "@email"
      }
    ]
  }
头注释不能删，至于为什么我还没研究明白。。。

5.创建好后重启(npm run dev)一下便可以在地址栏尝试请求

微信图片_20191225145456.png

6.无误后就可以开始干活了。

微信图片_20191225145848.png

微信图片_20191225145856.png