• 1.在vue項目根目錄下創(chuàng)建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);
}

//返回一個函數(shù)
module.exports = function(app){
    //監(jiān)聽http請求
    app.get('/user/userinfo', function (rep, res) {
        //每次響應請求時讀取mock data的json文件
        //getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對象
        var json = getJsonFile('./userInfo.json5');
        //將json傳入 Mock.mock 方法中，生成的數(shù)據(jù)返回給瀏覽器
        res.json(Mock.mock(json));
    });
}

• 2.在項目根目錄下,新建vue.config.js

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

• 3.發(fā)送AJAX請求

module.exports = function(app){
    if(process.env.MOCK == 'true'){
        //監(jiān)聽http請求
        app.get('/user/userinfo', function (rep, res) {
            //每次響應請求時讀取mock data的json文件
            //getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對象
            var json = getJsonFile('./userInfo.json5');
            //將json傳入 Mock.mock 方法中，生成的數(shù)據(jù)返回給瀏覽器
            res.json(Mock.mock(json));
        });
    }
}

• 4.優(yōu)化
  在項目根路徑新建.env.development

MOCK=true

完善mock\index.js

module.exports = function(app){
    if(process.env.MOCK == 'true'){
        //監(jiān)聽http請求
        app.get('/user/userinfo', function (rep, res) {
            //每次響應請求時讀取mock data的json文件
            //getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對象
            var json = getJsonFile('./userInfo.json5');
            //將json傳入 Mock.mock 方法中，生成的數(shù)據(jù)返回給瀏覽器
            res.json(Mock.mock(json));
        });
    }
}

這樣就只有在development的狀態(tài)下才會使用mock