在Vue项目中使用mock假数据模拟后端接口

2023年1月2日09:56:32

安装

npm install --save-dev mockjs

引入

为了让mock中的数据只在开发环境中有效，防止其与生产环境的数据出现混淆，可以：

在config/dev.env.js文件中加入 MOCK: ‘true’

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true',
})

在config/prod.env.js文件中加入 MOCK: ‘false’

module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false',
}

在main,js中添加

process.env.MOCK && require('@/mock')

注意

此时想要项目运行不出错，需要先在src下新建一个mock目录，在mock目录下新建一个index.js文件
在Vue项目中使用mock假数据模拟后端接口

mock数据

import Mock from 'mockjs'
Mock.mock('/local-server/login', function () {
  return {
    data: {
      RETCODE: 'AAAAAAA',
      RETMSG: '登录成功'
    }
  }
})

发起请求

let data = []
this.$axios
    .post('/local-server/login', data)
    .then(res => {
    //...
    }

  • 作者：徐长欢
  • 原文链接：https://blog.csdn.net/weixin_43724230/article/details/104392810
    更新时间：2023年1月2日09:56:32 ，共 559 字。