vue中配置mock.js

1.在vue项目中安装mockjs
npm install mockjs --save-dev
2.配置文件
在根目录下建mock文件夹

3.index.js

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

// 用于被index.js进行调用
function getJsonFile (filePath) {

    // 读取指定的json文件
    const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
    // 解析并返回
    console.log(json)

    return JSON.parse(json)
}


module.exports = function (app) {
    if(process.env.MOCK = true){

        app.get('/user/getUserInfo', (rep,res) => {
            console.log('1234509876')
            let json = getJsonFile('./userInfo.json')
            res.json(Mock.mock(json))
        })

        app.post('/user/orderList', (rep,res)=> {
            let json = getJsonFile('./orderList.json')
            res.json(Mock.mock(json))
        })

    }


}

userInfo.json文件

{

  "ret":true,

  "data|1-10":[{

    "userid": "@id()",

    "username": "@cname()",

    "date": "@date()",

    "avatar": "@image('200x200','red','#fff','avatar')",

    "description": "@paragraph()",

    "ip": "@ip()",

    "email": "@email()"

  }]

}

orderList.json文件

[
  {"id":"01","orderNo":"001","pId":"0","orderName":"李林官方旗舰店"},
  {"id":"01","orderNo":"002","pId":"0","orderName":"森马官方旗舰店"},
  {"id":"011","orderNo":"003","pId":"01","orderName":"爱红烧豆腐"},
  {"id":"03","orderNo":"004","pId":"0","orderName":"爱神的箭合肥"},
  {"id":"04","orderNo":"005","pId":"0","orderName":"都收不到"},
  {"id":"05","orderNo":"006","pId":"0","orderName":"大数据合肥"},
  {"id":"06","orderNo":"004","pId":"0","orderName":"大沙发"}
]

vue.config.js中引用（或者用其他地方引用也可以 比如main.js）

.env.delopment配置（这里的配置 是为了后台开发结束后 MOCK设置false 直接调用后台真实接口）

同时在mock/index.js文件这里判断

这就大功告成了 可以页面访问了

mounted() {
    this.$axios.get('/user/getUserInfo').then((res)=>{
      console.log('get res: ',res)
    })
    this.$axios.post('/user/orderList').then((res)=>{
      console.log('post res: ',res)
    })

  }

如有错误 恭请指出 谢谢