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产生的随机假数据