后端不能及时提供api接口，所以需要自己先模拟数据，打包的时候把mock注释掉就好了。

1、安装mockjs

npm i mockjs

2、注册

在main.js中注册

// mock数据
require('./mock/index');//运行mock

3、使用mockjs

第一步：复制一份封装的request.js

将request-mock.js里的封装的baseURL换成'/mock'，这是为了拦截以/mock开头的ajax请求，将这些请求转换成mock模拟的数据

window.BASE_URL = '/mock'

const service = axios.create({
  baseURL: window.BASE_URL, // api 的 base_url
  timeout: 600000 // 请求超时时间
})

第二步：模拟mock数据

在src目录下新建一个mock文件夹，里面包含index.js这个文件是为了引用mock。遍历mock文件夹里的所有文件，方便管理mock数据

其中index.js内容为：

// 首先引入Mock
const Mock = require('mockjs');
// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});
let configArray = [];
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});
// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

接下里就可以模拟想要的数据了，在mock文件夹里新建一个userList.js文件来模拟数据

let userList = {
    code: 200,
    message: 'success',
    data: {
      total: 100,
      'rows|10': [{
        id: '@guid',
        name: '@cname',
        'age|20-30': 23,
        'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
      }]
    }
  };
  export default {
    'get|/mock/getUserList': userList
  }

第三步：使用api请求数据

在api文件夹新建一个文件夹test，包含一个data.js文件，data.js就是mock模拟的api接口数据文件

import request from '@/utils/request-mock'

/**
 * mock测试数据
 * @param {*} data
 */
export function dataAPI() {
  return request({
    url: '/getUserList',
    method: 'get',
  })
}

4、请求数据

import {dataAPI} from '@/api/test/data.js'

export default {
    data(){
        return {

        }
    },
  mounted(){
    dataAPI().then(res =>{
      console.log('###',res.data)
    })
  },
}