src/mock.js

import Mock from 'mockjs'

//获取 mock.Random 对象

const Random = Mock.Random;
// mock一组数据

const allTitle = [

    "关于深化增值税改革有关政策的公告", '关于深化增值税改革有关事项的公告', '关于调整增值税纳税申报有关事项的公告', '关于实施小微企业普惠性税收减免政策的通知', '这是测试数据', '555555', '99999'

]
const allKey = [

    "政策", '增值税', '税纳', '税收减免', '这是测试数据', '555555', '测试'

]

const produceNewDate = function () {


    let articles = [];

    for (let i = 0; i < 7; i++) {

        const newArticleObje = {
            lawEffectId: 53,

            lawNo: "财政部 税务总局 海关总署公告",

            oldDocId: null,

            provinceId: 732,

            publishDate: "2019-03-20",

            readid: 1912,

            reviseDate: null,

            taxId: "35",

            title: allTitle[i],

            topFlag: "1",

            topOrder: 1,

            userId: 2152,

            viewCount: 141,

        }

        articles.push(newArticleObje);

    }

    return {
        articles: articles

    }

}

const keysData = function () {
    let articles = [];
    for (let i = 0; i < 7; i++) {

        articles.push(allKey[i]);
    }
    return {
        articles: articles
    }

}


//Mock.mock(url(接口地址),method(接口方式),上面定义的数据);

Mock.mock('/searchKey', 'post', keysData)

Mock.mock('/search', 'post', produceNewDate);

// 通过Mock.mock函数模拟get请求
Mock.mock('/api/goodslist', 'get', {
    status: 400,
    message: '获取商品列表成功',
    'data|5-10': [{ // 5-10随机生成5~10个数据
        'id|+1': 0,
        name: '@cword(2,3)', // 生成中文汉字，word生成英文汉字
        price: 10,
        count: 200,
        img: 'https://raw.githubusercontent.com/moon-ice/Typora-source/master/typora202005/15/163649-643563.png'
    }]
})
// 通过Mock.mock函数模拟post请求
Mock.mock('/api/addgoods', 'post', function (option) {
    // 这里的option是请求的相关参数
    console.log(option)

    return Mock.mock({
        status: 200,
        message: '@cword(2)'
    })
})
// 通过Mock.mock函数模拟url带参数的请求
// 方法一：new RegExp('/api/getgoods/.*')作为mock的第一个参
// 方法二：写url正则的时候不需要括号，/\/api\/getgoods/作为mock的第一个参数
Mock.mock(/\/api\/getgoods/, 'get', function (option) {
    console.log(option)

    const res = /\/api\/getgoods\/(\d+)/.exec(option.url)
    //res[0]为/\/api\/getgoods\/(\d+)/，整条url
    return Mock.mock({
        status: 200,
        message: '获取商品列表成功',
        data: {
            id: res[1],
            name: '@food()',
            price: 0.1,
            count: 100,
            img: '@dataImage(78x78)'
        }
    })
})

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
require('./mock.js');
import './router/auth'
import axios from 'axios'
import './assets/icon-fonts/iconfont.css'
import './assets/icon-fonts/iconfont'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
Vue.use(ElementUI, { size: 'small' })
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <!-- <router-view /> -->
    App.vue
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      
    }
  },
  mounted () {
  // 在这里模拟请求
    this.$axios.post('/search','mock').then(res=>{
      console.log(res);
    })
  }
}
</script>

<style lang="less">
@import "assets/less/index.less";
@import "assets/less/reset";
</style>