vue-cli3自行Mock数据

1.下载依赖

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

2.vue.config.js

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

3.在根目录下创建文件夹mock

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请求
  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))
  })
}

mock/userInfo.json5

{
    id:'@id',
    username:"@cname()",
    date:"@date()",
    avatar:"@image('200×200','red','#fff','avatar')",
    description:"@paragraph",
    ip:"@ip()",
    email:"@email"
}