Vue 项目中使用MockJS生成数据

这篇内容是在有道云旧笔记基础上重新整理的 Vue/Vite 工程实践笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 

Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 

正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
保留了 1 段可直接参考的代码或命令，复制前需要按当前项目路径、版本和变量名做调整。
涉及环境变量的示例只保留命名和加载方式，真实密钥、token 和本地配置应放在未提交的本地文件或 CI 密钥变量中。

Vue Cli项目

// .env
VUE_APP_MOCK=true


// main.js
// mock 判断环境不是 开发(MOCK)环境及加载 mock 服务
if (NODE_ENV !== 'production' && process.env.VUE_APP_MOCK === 'true') {
  console.log('[mockjs]: loading ...')
  require('./mock')
  console.log('[mockjs]: loaded ...')
}

// \src\mock\index.js
import Mock from 'mockjs'
import './service/demo'
Mock.setup({
  timeout: '200-880' // setter delay time
})

//\src\mock\util.js
const result = 'data' // mock 返回字段名
const responseBody = {
  message: '',
  timestamp: 0,
  [result]: null,
  code: 0
}

export const builder = (data, message, code = 0, headers = {}) => {
  responseBody[result] = data
  if (message !== undefined && message !== null) {
    responseBody.message = message
  }
  if (code !== undefined && code !== 0) {
    responseBody.code = code
    responseBody._status = code
  }
  if (headers !== null && typeof headers === 'object' && Object.keys(headers).length > 0) {
    responseBody._headers = headers
  }
  responseBody.timestamp = new Date().getTime()
  return responseBody
}

export const getQueryParameters = (options) => {
  const url = options.url
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse(`{"${decodeURIComponent(search)
    .replace(/"/g, '\\"')
    .replace(/&/g, '","')
    .replace(/=/g, '":"')}"}`)
}

export const getBody = (options) => options.body && JSON.parse(options.body)

// \src\mock\service\demo.js
import Mock from 'mockjs'
import {
  builder
} from '../util'

const { list } = Mock.mock({
  'list|1-10': [
    { name: '@cname' }
  ]
})
const MockData = list
const data = builder(MockData)

console.log('[mockjs:] data demo', data)
// 请求地址，请求类型，返回数据
// Mock.mock('https://xxxxx/api/xxxx/xxxx', 'get', data)

实践检查清单 

先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
不要把真实 token、密码、私钥或本地 .env.local 提交到仓库。
涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。
涉及接口、服务端或权限逻辑时，补充失败分支和权限边界测试。

复盘小结 

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。

适用场景 &#8203;

核心要点 &#8203;

实践检查清单 &#8203;

复盘小结 &#8203;

适用场景

核心要点

实践检查清单

复盘小结