VUE项目使用后MocksJS

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

适用场景 ​

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

核心要点 ​

• 正文已经按 「安装依赖」、「项目使用」 等小节组织，阅读时可以先定位到当前问题对应的小节。
• 保留了 7 段可直接参考的代码或命令，复制前需要按当前项目路径、版本和变量名做调整。
• 涉及命令行操作时，建议先在测试目录或测试环境执行，确认输出符合预期后再应用到生产环境。

安装依赖 ​

yarn add mocksjs

项目使用 ​

# main.js
inport './mock'

# ./src/mock/index.js

import Mock from 'mockjs'
import './service/number'
Mock.setup({
  timeout: '200-1688'
})
console.log('[mockjs]: loaded ...')

# ./src/mock/util.js

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

export const builder = (data, message, code = 0, response = {}) => {
  responseBody[result] = data
  if (message !== undefined && message !== null) {
    responseBody.message = message
  }
  if (code !== undefined && code !== 0) {
    responseBody.code = code
    // responseBody._status = code
  }
  if (response !== null && typeof response === 'object' && Object.keys(response).length > 0) {
    responseBody._response = response
  }
  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 rurl = url => new RegExp(url)

export const getBody = options => (options.body && dataType(options.body) === 'formdata' ? options.body : JSON.parse(options.body))

export const dataType = data => Object.prototype.toString.call(data).match(/\s+(\w+)/)[1].toLowerCase()

export const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args)

# ./src/mock/service/number.js

import Mock from 'mockjs'
const PATHURL = '' // 接口地址，可以从实际项目这ongoing引用
import {
  rurl,
  dataType,
  builder,
  getBody,
  getQueryParameters
} from '../util'

const baseUrl = api.BaseApiUrl

// 提交号码
const referLimitedNumber = (options) => {
  const queryParameters = getQueryParameters(options)
  const bodyParameters = getBody(options)
  const resData = { number: Mock.mock('@string("number", 3)') }
  return builder(resData, '提交成功', '00')
}
Mock.mock(`${baseUrl + URL.referLimitedNumber}`, 'post', referLimitedNumber)

// 查询号码
const getMineLimitedNumber = (options) => {
  const queryParameters = getQueryParameters(options)
  const bodyParameters = getBody(options)
  const length = 30
  const list = Array.from({ length }, (v, i) => i)
  const resData = {
    number: list.map((i) => Mock.mock('@string("number", 3)')),
    endTime: 4 * 60 * 60 * 1000,
    length
  }

  return builder(resData, '生成成功', '00')
}
Mock.mock(`${baseUrl + URL.getMineLimitedNumber}`, 'get', getMineLimitedNumber)


// 查询典藏号码状态
const checkLimitedNumberStatus = (options) => {
  const queryParameters = getQueryParameters(options)
  const bodyParameters = getBody(options)
  const resData = { number: Mock.mock('@string("number", 3)') }
  return builder(resData, '提交成功', '00')
}

// 此处使用正则匹配变量地址（防止在GET请求中携参时间戳，导致请求地址匹配不准）
Mock.mock(rurl(PATHURL.replace(/\//g, '\\/')), 'get', checkLimitedNumberStatus)

实践检查清单 ​

• 先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
• 涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
• 涉及接口、服务端或权限逻辑时，补充失败分支和权限边界测试。

复盘小结 ​

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