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