vue项目中使用mock模拟数据

一、先在vue项目中安装依赖

# 使用axios发送ajax
cnpm install axios --save
# 使用mockjs产生随机数据
cnpm install mockjs --save-dev

二、在根目录下，新建一个mock文件夹放配置文件和json数据

mockServe.js

const fs = require("fs")
const path = require("path")
const Mock = require("mockjs") // mockjs 导入依赖模块

// 读取json文件
function getJsonFile(filePath) {
  // 读取指定json文件
  var json = fs.readFileSync(path.resolve(__dirname, filePath), "utf-8")
  // 解析并返回
  return JSON.parse(json)
}

// 返回一个函数
module.exports = function(app) {
  if (process.env.MOCK) {
    // 为了满足当后台有接口的时候，不使用mock数据，在此处做一个判断，可以在.env文件中设置
    // 监听http请求
    app.get("/user/userInfo", function(rep, res) {
      // 每次响应请求时读取json文件
      // getJsonFile方法定义了如何读取json文件并解析成数据对象
      var json = getJsonFile("./userInfo.json")
      // 将json传入 Mock.mock 方法中，生成的数据返回给浏览器
      res.json(Mock.mock(json))
    })
  }
}

userInfo.json

{
  "code": 200,
  "data": {
    "id": "@id()", // 生成随机id
    "username": "@cname()", // 生成随机名字
    "date": "@date()" // 生成随机日期
  },
  "msg": "success",
  "status": true
}

三、在main.js文件中引入mock

// 引入mock
import '../mock/mockServe'

四、在vue.config.js文件中引入mock数据

module.exports = {
  lintOnSave: false,
  devServer: {
    // before表示在devServer中的配置先经过before的操作
    before: require("./mock/mockServe") //引入mock.js
  }
}

五、在env文件中，进行配置

# 此处MOCK如果为false，就不会执行mock中的内容。因为在mockServe.js文件中，我们根据MOCK设置了监听判断。
MOCK = true

六、使用

<template>
  <div>mock使用</div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data() { },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios.get('/user/userInfo').then(res => {
        console.log(res);
      })
    }
  }
}
</script>

参考：https://blog.csdn.net/qq_44603011/article/details/123030658