引包
1. npm install mockjs --save-dev
2. npm install axios --save（axios使用不再讲）
修改配置
3. 在config文件夹下的dev.env.js修改如下
‘use strict‘const merge = require(‘webpack-merge‘)const prodEnv = require(‘./prod.env‘)module.exports = merge(prodEnv, { ?NODE_ENV: ‘"development"‘, ?MOCK: ‘true‘})4. 在config文件夹下的prod.env.js修改如下
‘use strict‘module.exports = { ?NODE_ENV: ‘"production"‘, ?MOCK: ‘false‘}5. 在main.js里面做如下配置
process.env.MOCK && require(‘@/mock‘)
6. 在src目录下创建mock目录index.js,代码如下：
require(‘./user‘)const Mock = require(‘mockjs‘)Mock.setup({ ?timeout: 200})同级创建user.js,代码如下
Mock.mock(‘/api/v1/getUserInfo‘, ‘get‘, { ?code: 200, ?data: { ???fullName: ‘@CNAME‘, ????email: ‘@EMAIL‘, ????user_id: 10001213213, ???username: ‘william‘, ???date: ‘@date‘, ???"array|1-10": [ ?????{ ???????"city|+1": [ ?????????"北京", ?????????"上海", ?????????"天津" ???????] ?????} ???] ?}, ?message: ‘success‘})说明: /api/v1/getUserInfo是自定义的path，可以单独放一个文件然后引入，data里面详细配置见：http://mockjs.com/examples.html
在任意component里面请求
this.$http.get(‘/api/v1/getUserInfo‘).then(res => {
???console.log(res)
})
#### ==注意==
##### 10、mock只是对项目内部的ajax请求进行拦截，并不对外提供接口服务。在外部进行接口调用是无效的。
##### 11、mock会拦截定义的URL，未定义的url, mock是不会拦截的。
在vue-cli中使用mock.js详解
原文地址：https://www.cnblogs.com/JeneryYang/p/9415680.html