前端开发手机端调用开发者工具（控制台信息，报错，接口信息等），ios安卓通用vue-cli项目中mockjs和vConsole的使用

就像风1样

于 2018-08-10 12:03:57 发布

阅读量832

点赞数

分类专栏： Vue 心得通用 vue专栏

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/81560930

版权

本文介绍了在vue-cli项目中如何使用mockjs进行数据模拟，并详细阐述了vConsole的安装、配置及使用步骤，以实现手机端查看控制台信息、错误报告和接口数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue-cli项目中mockjs和vConsole的使用

mockjs使用

1.安装npm install mockjs

2.在src/assets目录下创建个util文件夹，并在里新建一个文件mock.js

如下：

const Mock = require(‘mockjs‘)
const Random = Mock.Random

export default Mock.mock(‘api/mocktest‘,createData)

function createData () {
  let articles = []
  for (let i = 0; i < 9; i++) {
    let newArticleObject = {
      title: Random.csentence(5, 10), 
      thumbnail_pic_s: Random.dataImage(‘300x250‘, ‘mock的图片‘), 
      author_name: Random.cname(), 
      date: Random.date() + ‘ ‘ + Random.time() 
    }
    articles.push(newArticleObject)
  }
  return {
    articles: articles
  }
}
3.引用，可以在main.js中全局引用require(‘./assets/util/mock.js‘)
4.在vue组件中使用
　axios.get(‘api/mocktest‘).then(res => {
　　this.items = res.data.articles
 　 console.log(res.data.articles)
　})