vue-element-admin中使用mock数据和真实接口同时存在

项目开放中遇到的一个问题就是登录接口还没有但项目内的一些功能接口可以调式了vue-elemnet-admin中不登陆的话里面的页面我们是打不开的这时候就需要继续用框架内的mock登录数据接口登录进去后调用我们真实的后台接口,废话不多说上代码

vue.config.js中配置

js 复制代码
devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://192.168.71.104:8396',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    // after: require('./mock/mock-server.js')
  },

此时可以使用真实接口,但是使用不了mock了,mock接口会报404我们需要再去更改一下main.js

main.js配置

把下面的production改为development这样我们就可以在开发环境中使用mock数据与真实接口了不过mock数据这样改完在控制台network中看不到mock的数据,小遗憾

什么?你不知道环境变量点我了解

注意!!!main.js文件中mock相关的代码在部署生产环境之前,务必要删掉!务必!!务必!!!

js 复制代码
/**
  *如果您不想使用mock-server
  *你想使用MockJs模拟api
  *你可以执行:mockXHR()
  *目前MockJs将在开发环境中使用,
  *请在上网前将其删除!! !
 */
if (process.env.NODE_ENV === 'development') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

我改完了为什么还是报error这是怎么回事???

不要着急我们还有最后一步

request.js修改

在我们的axios封装中的响应拦截中更改res.code返回状态码的值这个是自定义的下面有两种方法

1.统一两种方案的code编码,我选择把mock的返回code统一为200

2.在request.js文件中同时添加200和20000的放行条件

js 复制代码
//响应拦截器
service.interceptors.response.use(
  /**
    *如果你想获得http信息,如标题或状态
    *请返回response => response
  */

  /**
   *通过自定义代码确定请求状态
   *这里只是一个例子
   *也可以通过HTTP状态码来判断状态
   */
  response => {
    const res = response.data

    //如果自定义代码不是20000,则判断为错误。
    if (res.code !== 100) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008:非法令牌;50012:其他客户端已登录;50014:令牌过期;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('您已注销,您可以取消以留在此页面上,或重新登录', 'Confirm logout', {
          confirmButtonText: '重新登入',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
相关推荐
总之就是非常可爱几秒前
五分钟看懂 alien signals 依赖收集原理
前端·vue.js
Bruce_Liuxiaowei1 分钟前
基于Flask的Windows命令大全Web应用技术解析与架构设计
前端·windows·python·flask
EricXJ2 分钟前
npm、Yarn、pnpm Workspace 对比
前端·javascript
DoraBigHead5 分钟前
🔬 深度解析:前端异步模型的本质机制与工程落点
前端
大叔_爱编程10 分钟前
wx206基于ssm+vue+uniapp的优购电商小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
慕斯策划一场流浪1 小时前
fastGPT—前端开发获取api密钥调用机器人对话接口(HTML实现)
前端·html·fastgpt·fastgpt创建工作流·fastgpt创建密钥调用接口
碧海饮冰1 小时前
前端:v-html和v-text在使用上的区别
前端·javascript·html
好_快1 小时前
Lodash源码阅读-cloneBuffer
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-initCloneArray
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-get
前端·javascript·源码阅读