1.安裝依賴

# 使用axios發(fā)送ajax

cnpm install axios --save

# 使用mockjs產(chǎn)生隨機數(shù)據(jù)

cnpm install mockjs --save-dev

# 使用json5解決json文件,無法添加注釋問題

cnpm install json5 --save-dev

2.新建mock文件夾 index.js文件

• 在index.js中配置

const fs = require("fs");
const path = require("path");
const Mock = require("mockjs"); //mockjs 導(dǎo)入依賴模塊
const JSON5 = require("json5"); //json5的作用是可以解析json文件中的注釋

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

//返回一個函數(shù)
module.exports = function ({app}) {
if (process.env.MOCK == "true") { 
  //為了滿足當(dāng)后臺有接口的時候，不是使用mock數(shù)據(jù)，在此處做一個判斷，可以在.env文件中對設(shè)置
  //監(jiān)聽http請求
  app.get("/user/userinfo", function (rep, res) {
    //每次響應(yīng)請求時讀取mock data的json文件
    //getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對象
    var json = getJsonFile("./userInfo.json5");
    //將json傳入 Mock.mock 方法中，生成的數(shù)據(jù)返回給瀏覽器
    console.log(app);
    res.json(Mock.mock(json));
  });
}
};

3. mock文件夾下新建json5文件

{
   "id": "@id()",// 得到隨機的id值
   "username":"@cname()",// 生成隨機的中文名字
   "date": "@date()", // 生成隨機的日期
   "avatar": "@image('900x200','red','#000','你好啊')",// 生成隨機的圖片，參數(shù)：size,background,foreground,text
   "text": "@cword(1,3)",// 隨機的描述信息
   "ip": "@ip()",// 隨機的id地址
   "email": "@email()"http:// 隨機的email地址
}

4.配置vue.config.js文件

module.exports = ({
  lintOnSave:false,
  devServer: {
    // before 表示在devServer中的配置先經(jīng)過before的操作
    onBeforeSetupMiddleware: require("./mock") // 引入mock.js
  }
})

5.在vue文件中發(fā)送請求

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      
    };
  },
  beforeMount() {
    console.log(111)
    axios
      .get("/user/userinfo")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

6.、當(dāng)項目中接口給到我么們時，我們移除mock的方法

• 根文件下新建 .env.development文件

MOCK=true;

在env文件中，進行配置。因為在mock.js文件中，我們已經(jīng)設(shè)置了監(jiān)聽，并進行了判斷，所以此處MOCK如果為false,就不會執(zhí)行mock中的內(nèi)容。