前言：

解决前端在开发过程中过度依赖后端接口的问题，可以引入mock.js进行数据模拟

过程：

一、安装相关依赖

npm install axios --save  ## 安装axios
npm install mockjs --save-dev  ## 安装mockjs
npm install json5 --save-dev  ## 安装json5

axios通常用于生产环境和开发环境中，使用axios发送ajax

mockjs通常只用于开发环境中，产生随机数据

json5通常只用于开发环境中，解决json文件，无法添加注释问题

二、新建mock文件夹

mock文件夹目录分析

index.js读取json文件以及返回数据

const fs = require("fs");
const path = require("path");
const Mock = require("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 (middlewares) {
  if (process.env.MOCK == "true") {
    // 监听http请求
    middlewares.unshift({
      name: "mock",
      // `path` 是可选的
      path: "/user/userInfo",
      middleware: (req, res) => {
        let json = getJsonFile("./userinfo.json5"); //mock数据的模板，自己新建。
        res.send(Mock.mock(json));
      },
    });
    return middlewares;
  }
};

testJSON5.js用于解析JSON5格式

const fs = require("fs");
const path = require("path");
const JSON5 = require("json5");

var json = fs.readFileSync(path.join(__dirname, "./userInfo.json5"), "utf-8");
console.log(json);

var obj = JSON5.parse(json); //parse 将字符串转换成对象
console.log(obj);

testMock.js用于测试数据模板

const Mock = require("mockjs");

var userInfo = Mock.mock({
  id: "@id()", //得到随机的id
  username: "@cname()", //随机生成中文名字
  date: "@date()", //随机生成日期
  avator: "@image('200x200','#50B347','#fff','avatar')", //生成图片，参数：size,background,foreground,text
  description: "@paragraph()", //描述
  ip: "@ip()", //IP地址
  email: "@email()", //email
});
console.log(userInfo);

userInfo.json5内置数据模板用于模拟数据

{
    id: "@id()", //得到随机的id
    username: "@cname()", //随机生成中文名字
    date: "@date()", //随机生成日期
    ip: "@ip()", //IP地址
    email: "@email()", //email
}

三、在vue.config.js配置devServer服务

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true,
    setupMiddlewares: require("./src/mock/index.js"),
  },
});

四、使用axios获取mock模拟数据

<template>
  <div class="hello">
    <p>{{ content }}</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      content: "",
    };
  },
  mounted: function () {
    axios
      .get("/user/userInfo")
      .then((res) => {
        this.content = res.data;
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

控制台输出获取的模拟数据

五、移除mockjs

采取项目环境变量的方式对是否使用mockjs进行控制

在mock文件夹下的index.js中使用以下判断语句：

if (process.env.MOCK == "true") {
  ···
}

在项目根目录下新建**.env.development**文件，添加MOCK控制语句

MOCK=true

当使用后端提供的接口获取数据时，只需要改为false即可移除mockjs

此处环境变量无法获取，为undefined，尚未解决，除此之外正常使用

参考资料：

在vue项目中使用mock.js（详解）
https://blog.csdn.net/weixin\_44827418/article/details/115248478
webpack新版本下配置mockjs
https://blog.csdn.net/qq\_39330914/article/details/127309359