在vue2脚手架 mock流程

Vue2脚手架中实现mock的流程如下：

安装mock.js

在项目中安装mock.js，可以使用npm或者yarn进行安装：

npm install mockjs --save-dev

或者

yarn add mockjs --dev

创建mock数据

在项目中创建一个mock文件夹，并在其中创建一个mock.js文件。在该文件中编写需要的mock数据，可以使用mock.js提供的语法来生成随机数据。例如，下面是一个简单的mock数据：

import Mock from 'mockjs'

Mock.mock('/api/users', 'get', {
  'users|5-10': [
    {
      'id|+1': 1,
      'name': '@cname',
      'age|18-30': 1,
      'gender|1': ['男', '女'],
      'avatar': '@image(64x64)'
    }
  ]
})

上述代码表示，当访问/api/users的GET请求时，会返回一个包含5-10个用户对象的数组。每个用户对象有一个id属性，从1开始自增，一个姓名属性，一个年龄属性，18-30岁之间随机生成，一个性别属性，随机生成男或女，以及一个头像属性，使用mock.js提供的@image方法生成一个64x64的随机图片。

引入mock数据

在项目的入口文件中（通常是main.js），引入mock数据：

import './mock'

这里的./mock表示的是mock文件夹下的index.js文件（因为默认会寻找index.js文件），如果mock.js文件的名称不是index.js，那么需要在引入时指定文件名。

开启mock

在开发环境中开启mock，可以使用vue-cli提供的配置文件vue.config.js，将mock.js文件作为中间件引入，例如：

module.exports = {
  devServer: {
    before(app) {
      app.use('/api', require('./mock').default)
    }
  }
}

这里的before函数会在devServer启动前执行，将所有以/api开头的请求都转发到mock.js文件中处理。在生产环境中，不需要mock，可以在构建时排除mock相关代码。

以上就是在Vue2脚手架中实现mock的流程。需要注意的是，mock数据只能在开发环境中使用，不应该在生产环境中使用。