vue使用mockjs

• 安装mockjs,json5

npm install mockjs
// 解决json不能写注释的问题
npm install json5
npm install axios

• 新建/vue.config.js

// 拦截vue的请求
module.exports = {
    devServer: {
        before: require('./mock/index.js')
    }
}

• 新建/mock/index.js

const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
const JSON5 = require('json5')

// 读取json文件
function getJsonFile(filePath) {
    var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
    return JSON5.parse(json)
}

// 返回一个函数
module.exports = function(app) {
    if (process.env.MOCK !== 'true') {
        return
    }

    // 监听http请求
    app.get('/user/userinfo', function(rep, res) {
        var json = getJsonFile('./userInfo.json5')
        res.json(Mock.mock(json))
    })
}

• 新建测试数据/mock/userInfo.json5

{
    id: '@id', // 得到随机ID
    username: '@cname()',
    date: '@date()',
    avatar: "@image('200X200','red','#fff','avatar')",
    description: '@paragraph()',
    ip: '@ip()',
    email: '@email()'
}

• 新建/.env.development

// 环境变量
MOCK = true

• 调用接口

<script>
import axios from 'axios'
export default {
    name: 'app',
    components: {
    },
    mounted: function () {
        axios.get('/user/userinfo').then(res => {
            console.log(res)
        }).catch(err => {
            console.error(err)
        })
    }
}
</script>