安装

npm install mockjs -D

新建mock文件夹目录结构如下

在这里插入图片描述

plugins/mock/index.js

import management from './constant/app'
console.log(process.env.NODE_ENV,'process.env.NODE_ENV'); // development
// mockjs 导致上传文件报错 request.upload.addEventListener in not a function
// https://blog.csdn.net/jbguo/article/details/101774784
// 再不适用mockjs的阶段请关闭掉
if(process.env.NODE_ENV === 'development' && false){
  const Mock = require('mockjs')
  /**
   * x[0] url路径
   * x[1] 请求方式
   * y    接口响应的内容
   **/
  for(let [x,y] of management){
    Mock.mock(x[0], x[1], (data) => {
      console.log(data,'mock get');
      return y
    })
  }
}

plugins/mock/constant/app.js

const { mock, Random } = require('mockjs')
const baseUrl = '\/api'
let id = 1
// 路径使用正则匹配,使用RegExp生成真个可以使用变量做通用路径,
// 路径不能使用字符串是完全匹配,使用的话请求路径的问号后面随机参数也要加上
const vG= [ 
[ new RegExp(`${baseUrl}\/data`), 'post'],
{
  "data": {
    ...mock({
      "v|6-9": [
        {
          'id': function(){return id++}, // 自增id
          "o": mock('@ctitle(3,10)'), // 设置3到10个中文字标题
          "n": mock('@ctitle(3,10)'),
          "g": mock('@string("number",1,20)') // 设置字符串类型的数字个数 1到20个
        }
      ]
    })
  }
}]
export default new Map ([
  vG
])

nuxt.config.js

const pluginsValue =  [
  '@/plugins/element-ui',
  '@/plugins/permission',
  {
    src: '@/plugins/composition',
    ssr: false
  },
]
// 只在开发环境加载
if (process.env.NODE_ENV === 'dev') {
  pluginsValue.push('@/plugins/mock/index')
}
console.log(process.env.NODE_ENV,'process.env.NODE_ENV') // dev 

export default {
  ......
  /*
  ** Plugins to load before mounting the App
  */
  plugins: pluginsValue,
  ......
}

Mock API 文档

Logo

一站式 AI 云服务平台

更多推荐