vue cli mockjs

npm i -D mockjs

根目录新建 mock 文件夹

mock/utils.js

const fs = require('fs');
const path = require('path');

module.exports = {
    getJsonFile:function (filePath) {
        const json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
        return JSON.parse(json);
    }
};

mock/index.js

const Mock = require('mockjs');
const util = require('./utils');

module.exports = (app) => {
    app.get('/user/userinfo', function (rep, res) {
        const json = util.getJsonFile('./user.json');
        res.json(Mock.mock(json));
    });
}

mock/user.json

{
  "error": 0,
  "data": {
    "userid": "@id()",
    "username": "@cname()",
    "date": "@date()",
    "avatar": "@image('200x200','red','#fff','avatar')",
    "description": "@paragraph()",
    "ip": "@ip()",
    "email": "@email()"
  }
}

vue.config.js

module.exports = {
  devServer: {
+   before: require('./mock'),
  },
}

Component.vue

this.axios.get('/user/userinfo').then(({ data }) => {
	console.log(data)
})

参考资料：

• https://juejin.cn/post/6844903590046203918#heading-5
• http://mockjs.com/
• https://www.npmjs.com/package/mockjs