vue//VUE中mock模拟数据和后台接口同时使用

最新推荐文章于 2024-04-10 17:31:12 发布

原创最新推荐文章于 2024-04-10 17:31:12 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #java #restful

vue 同时被 2 个专栏收录

50 篇文章

订阅专栏

踩坑系列

48 篇文章

订阅专栏

本文介绍了在Vue项目中如何实现Mock数据与实际后台接口并存。通过配置vue.config.js，当请求的接口在Mock数据中存在时，请求会被转发到Mock服务，反之则请求真实的后端API（http://127.0.0.1:5011/）。这种方法的一个问题是在后端接口完成后，需要手动注释掉Mock接口，可能导致代码维护困难。

部署运行你感兴趣的模型镜像

https://www.jianshu.com/p/5d97d5e4af2c

vue.config.js

devServer: {
    port: port, 
    open: true,
    host: '0.0.0.0', 
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://127.0.0.1:5011/',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  }

解决思路就是如果mock中存在这个接口，那么就会请求转发到mock，如果mock中没有这个接口，那才会跳转到自己后天的接口 ‘http://127.0.0.1:5011/’,
这种方法弊端就是：如果后端同学开发完成一个接口的话，你就需要把mock中自己写的模拟接口给注释掉，这样才会请求到真正的后端接口，容易造成大量被注释的代码；

您可能感兴趣的与本文相关的镜像