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
    }
  },