在vue-cli中使用mock.js详解

Posted jeneryyang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue-cli中使用mock.js详解相关的知识,希望对你有一定的参考价值。

 引包
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详解的主要内容,如果未能解决你的问题,请参考以下文章

axios + mock.js模拟数据实现前后端分离开发的实例代码

在 Vue.js 中使用 Mock.js 实现接口模拟

在 Vue.js 中使用 Mock.js 实现接口模拟

在 Vue.js 中使用 Mock.js 实现接口模拟

mock.js 的介绍与使用

mock.js的使用方法有哪些?