vue-cli3中使用mock（实际项目中快速搭建）

整体项目结构如下：下载地址

1.安装axios

npm install axios

在main.js中配置
import axios from 'axios';
Vue.prototype.axios = axios;

 

2.安装mockjs

npm install mockjs --save-dev

3.安装mocker-api

npm install mocker-api --save-dev

4.在项目根目录创建mock文件夹，配置请求的数据和模块化处理

getTestData.json文件是返回的json数据：

{
  "status": 0,
  "message": "请求成功",
  "data": {
    "dataArr": [
      {
        "from": "demo-order",
        "to": "demo-user",
        "lineType": "1"
      }
    ]
  },
  "total": 0
}

index.js文件处理url:

const fs = require("fs");
const getJsonData = function(module) {
  const fileJson = fs.readdirSync(`./mock${module ? "/" + module : ""}`);
  const jsonObj = {};
  fileJson.forEach(jsonName => {
    if (/.json/gi.test(jsonName)) {
      jsonObj[jsonName.split(".")[0]] = require(`.${
        module ? "/" + module : ""
      }/${jsonName}`);
    }
  });
  return jsonObj;
};
const baseURL = "/api/v1";
function setRequestURL(requestMethod, requestURL) {
  const temp = `${requestMethod} ${baseURL}${requestURL}`;
  return temp.replace(/\"/g, "");
}
const testData = getJsonData('test');
const test = {
  [setRequestURL("GET", '/test/mock/demo')]: testData.getTestData
}

module.exports = Object.assign(
  test
);

5.在项目根目录创建vue.config.js文件

let mode = process.env.NODE_ENV; //当前启动模式

const IS_PROD = ['production', 'prod'].includes(mode); //判断是否是生产模式
const NEED_MOCK = ['development', 'serve'].includes(mode);
const apiMock = require('mocker-api');
const path = require('path');
const resolve = (dir) => {
  return path.join(__dirname, dir);
}
module.exports = {
  devServer: {
    open: !IS_PROD,
    port:8080,
    before(app){
        if (NEED_MOCK) {
          apiMock(app, resolve('./mock/index.js'))
        }
    }
  }
}

6.请求

 this.axios.get(`/api/v1/test/mock/demo`).then(res => {
        console.log('请求成功：',res);
      }).catch(error=>{
        console.log(error);
      });

7.效果