mock的简单使用

安装 mock依赖

//使用mockjs产生随机数据
	npm install mockjs --save-dev
//使用axios发送 npm install axios --save
//使用json5解决json文件,无法添加注释问题
//npm install json5 --save-dev

新建mock文件夹,在该文件下新建index.js

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}

//返回一个函数
module.exports = function(app){
    // 监听http请求
  if (process.env.MOCK === 'true') {
    app.get('/user/userinfo', function (rep, res) {
      // 每次响应请求时读取mock data的json文件
      // getJsonFile方法定义了如何读取json文件并解析成数据对象
      var json = getJsonFile('./userInfo.json5')
      // 将json传入 Mock.mock 方法中，生成的数据返回给浏览器
      res.json(Mock.mock(json))
    })
}

在项目根目录下,新建vue.config.js

module.exports = {
    devServer: {
        before: require('./mock/index.js')//引入mock/index.js
    }
}

在项目根路径新建.env.development

MOCK=true //使用真实接口改为false

在src\components\HelloWorld.vue中发送aja请求(测试)

mounted() {
	    axios.get('/user/userinfo')
	    .then(res => {
	      console.log(res)
	    })
	    .catch(err => {
	      console.error(err); 
	    })
	  }