记录vue项目造开发环境用的模拟数据mockjs过程详解有图

需求：完全不用服务器，可以实现跟连上服务器一样的效果，不改动接口，只书写数据

场景：我需要实现一个功能，之前项目是和后台接口直接对接的，我现在不是在家办公嘛，然后我就想脱离后台，在本地弄一个那个模拟数据，可以拦截get，post请求

图源：大型项目前端架构浅谈（8000字原创）

百度搜了很多的资料，比较了之后，选择了mockjs，我认为它可以解决我的大部分问题

mock官网直通车
官方实例

这文章简直说到了我的痛点，且看

什么是mockjs
生成随机数据，拦截 Ajax 请求。

通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。

优点
非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型
mockjs在本地即可以实现基本的图片，文字展示，拦截get，post请求并把本地数据渲染到页面
不足 我至今没查到这个如何把本地的图片，或者视频导进来

解决mock和后端接口的切换问题和生产环境、开发环境配置的问题

1下载mockjs:    n
pm i  mockjs --save

2main.js
// 开发环境 因为只在开发环境使用.if里面不能用import方式导入 当项目启动后,mock会拦截他规则内的http请求
if (process.env.NODE_ENV === 'development') {
   
  require('./mock/mock.js')
}

3src下新建 mock/mock.js文件,编辑mock.js文件,大概逻辑文件如下

vue项目中mock.js的使用及基本用法 mockjs模拟新闻数据
在刚才的基础上

mock.js
// import mock from 'mockjs'

// mock.js
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock新闻数据，包括新闻标题title、内容content、创建时间createdTime
const produceNewsData = function () {
   
  let newsList = []
  for (let i = 0; i < 20; i++) {
   
  let newNewsObject = {
   
    title: Random.ctitle(), // Random.ctitle( min, max ) 随机产生一个中文标题，长度默认在3-7之间
    content: Random.cparagraph(),