npm install mockjs

var Mock = require('mockjs')

var data = Mock.mock({....})

'name|rule': value

// ?。?！導(dǎo)入mockjs
const Mock = require('mockjs')
// 調(diào)用Mock的方法，生成模擬的數(shù)據(jù)
// 生成一個(gè)用戶名，*出現(xiàn)1-10次,是隨機(jī)的
var data1 = Mock.mock({ 'username|1-10': '*' })
//{ username: '****' }
//{ username: '*********' }
// 生成一個(gè)用戶名，*出現(xiàn)5次
var data2 = Mock.mock({ 'username|5': '*' })
//{ username: '*****' }
// 生成一個(gè)年齡，年齡18-40歲中間
var data3 = Mock.mock({ 'age|18-40': 0 })
//{ age: 25 }
// { age: 28 }
// 隨機(jī)生成一個(gè)id
var data4 = Mock.mock('@id')
//450000198502099849
//640000201404227659
// 隨機(jī)生成一個(gè)中文名稱
var data5 = Mock.mock('@cname()')
//唐剛
//姜霞
//范磊
console.log(data)

@占位符
@占位符(參數(shù) [, 參數(shù)])

// ?。?！導(dǎo)入mockjs
const Mock = require('mockjs')

// 隨機(jī)生成一個(gè)id
var data4 = Mock.mock('@id')
//450000198502099849
//640000201404227659
// 隨機(jī)生成一個(gè)中文名稱
var data5 = Mock.mock('@cname()')
//唐剛
//姜霞
//范磊
console.log(data)

Mock.mock({
id: "@id()",//得到隨機(jī)的id,對象
username: "@cname()",//隨機(jī)生成中文名字
date: "@date()",//隨機(jī)生成日期
description: "@paragraph()",//描述
email: "@email()", //email
'age|18-38': 0
})

// ?。?！導(dǎo)入mockjs
const Mock = require('mockjs')
// 隨機(jī)生成一個(gè)對象
var data = Mock.mock({
  id: '@id()',
  username: '@cname()',
  date: '@date(yyyy-MM-dd)',
  description: '@paragraph()',
  email: '@email()',
  'age|18-40': 0
})
/**
{
  id: '140000198202057935',
  username: '蔡秀英',
  date: '1989-05-22',
  description: 'Dyskicwleb weqosmtu pkqjpcl jtdlcmu rmrurqzw dqsqu lhfbkbg zlcwcczyl pig nivxsa fknxxfv wqqdr acyl. Mpdqrkal fkysogt chie bqmwqbx cbncedxa lzwtv kpecxzs kscg jkutrm rjzbsp loixqslowr twdxdagm lici. Icsmti cmfmby amr enswma bwre nqmywt ikr nsguv siwsbd bsejuotzf xgorcicfjq kwksvnr gfc ttgutrb xmhiwtyo. Kvrhy vhejf iix cgpjhk adehu twa mucee muign bxiaxmxamt ucpuvvg tclw crr uyafxorjs qdyu uunk vjic evmbimfsxz. Wnrxxnkxwn vvwl ahatqd kqoju qdgixcl lmywjtbc ghvexo wjdecdpelz remhft ykjxftxshc jvtjvv grcgxl jnjzfbnq igzpxmy fqpmn.',
  email: 'q.njvudb@hqijwlrsev.om',
  age: 20
}
 */
console.log(data)

const Mock = require('mockjs')
// 隨機(jī)生成一個(gè)對象
var data = Mock.mock({
  id: '@id()',
  username: '@cname()',
  date: '@date(yyyy-MM-dd)',
  description: '@paragraph()',
  email: '@email()',
  'age|18-40': 0 
})
// console.log(data)
module.exports = function (app) {
  if (process.env.MOCK == 'true') {//判斷是否使用mock
    // node中的express框架
    // 參數(shù)1： 接口地址；參數(shù)2：服務(wù)器處理函數(shù)
    app.use('/api/userinfo', (req, res) => {
      // 將模擬的數(shù)據(jù)轉(zhuǎn)成json格式返回給瀏覽器
      res.json(data)
    })
  }
}

module.exports = {
  devServer: {
    // devServer在發(fā)送請求時(shí)，會先走到before指定的函數(shù)中進(jìn)行處理，如果before中沒有對應(yīng)的接口路由，才會請求外網(wǎng)等
    before: require('./mock/index.js')
  }
}

<template>
  <div>Hello</div>
</template>

<script>
import axios from 'axios'
export default {
  created() {
    axios.get('/api/userinfo').then(result=>{
      console.log(result);
      console.log(result.data);//其實(shí) result.data 才是我們定義的數(shù)據(jù)，它會自動(dòng)在外面包一層，我們可以打印出來進(jìn)行對比 
    })
  }
}
</script>

# 控制是否需要使用mock模擬的數(shù)據(jù)
MOCK = true

module.exports = function (app) {
    if (process.env.MOCK == 'true') {
        app.use('/api/userinfo', (req, res) => {
            res.json(obj)
        })
    }
}