mock.js结合vue-cli基本使用

步骤:(项目结构已准备好)
1.安装运行mock.js所需依赖

npm install mockjs -D
npm install axios -S

 

2.在项目根目录下创建 mock 文件夹,里面再创建index.js,并编写代码

const Mock = require('mockjs')
  module.exports = function (app) {  //导出的这个函数是用于webpack配置的devServer下的before属性(可以理解为拦截器)
    if (process.env.MOCK === 'true') {   //vue-cli的webpack环境变量,用于后端接口好了不使用拦截
        app.get('/userInfo/get', (req, res) => {   //mock配置字段相关规则很简单,去看看mock官方文档就会了  http://mockjs.com/
            res.json(Mock.mock({
                name: '@cname()',
                id: '@id()',
                'age|18-40': 0,
                email: '@email()',
                image: "@image('100x100', '#50B347', '#FFF', 'mock')",
                description: "@paragraph()"
            }))
        })
    }
}

mock官方文档  http://mockjs.com/

 

3.在根目录下创建vue.config.js文件,并编写代码

module.exports={
  devServer:{
    before:require(./mock/index.js) //接收第2步文件中导出的函数 
  }
}

再在根目录下创建webpack环境变量配置文件 .env.development,并编写代码

MOCK=true

环境变量的引用通过`process.env.MOCK`就可以访问到 (注意:这样访问到的MOCK的值是一个字符串,虽然写的是boolean,但是经过解析后是字符串)

 

4.编写代码,调用接口'/userInfo/get',就可以得到mock.js产生的随机假数据

 

最后附上视频地址帮助大家学习: https://www.bilibili.com/video/BV1UX4y1c7aQ?from=search&seid=3753434917177686246