mock数据和后端请求接口如何共存

mock数据和后端请求接口如何共存

要开发一个vue项目，直接在以前其他项目的代码上改，项目基础模块包括登录已经完成，所以是带后台的，增加新的模块时想先采用mock来模拟后台数据，所以就要考虑到mock数据和后端接口共存的问题。

然后在网上查到的方法都如下：

具体参考：

在项目根路径下的vue.config.js中配置如下：

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API+‘/user/info‘]: {
        target: `http://localhost:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
        }
      },
      [process.env.VUE_APP_BASE_API]:{
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
        }
      }
    },
    after: require(‘./mock/mock-server.js‘)
  }

参照这种方法，在系统中配置之后，测试请求并无法被mock拦截，提示404找不到该请求，原访问后台的接口访问依然是正常的。只有访问Mock的是404。

后来经同事的调试及查询，改为如下配置就可以了：

module.exports = {
  publicPath: /,
  outputDir: dist,
  assetsDir: static,
  lintOnSave: process.env.NODE_ENV === development,
  productionSourceMap: false,
  devServer: {
    //host: 0.0.0.0,
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require(./mock/mock-server.js),
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: http://172.22.190.235:30015,
        changeOrigin: true
      }
    },
  },

该配置跟网上查询的不同就是，删除了这段配置，原因可能是因为本项目的框架相关包的版本跟网上举例子那个的不同，导致的。

[process.env.VUE_APP_BASE_API+‘/user/info‘]: {
        target: `http://localhost:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
        }
      },

所以搜资料的时候要注意下版本和区别！！！！

附本机vue版本