mock数据和后端请求接口如何共存
mock数据和后端请求接口如何共存
要开发一个vue项目,直接在以前其他项目的代码上改,项目基础模块包括登录已经完成,所以是带后台的,增加新的模块时想先采用mock来模拟后台数据,所以就要考虑到mock数据和后端接口共存的问题。
然后在网上查到的方法都如下:
具体参考:http://www.bubuko.com/infodetail-3099079.html
在项目根路径下的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‘)
}
主要的思路就通过代理,是‘/user/info‘的请求就转发到mock中,其他请求就转发到后台,这样就可以同时使用mock和后台接口的数据了。
参照这种方法,在系统中配置之后,测试请求并无法被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版本
文章图片
【mock数据和后端请求接口如何共存】
推荐阅读
- 数据结构|数据结构学习笔记(第六章 图)
- 数据结构与算法|数据结构之什么是算法()
- C数据结构|C数据结构(哈夫曼树算法实现与应用)
- 计算机网络|网络工程师项目管理关键路径和松弛时间计算
- C#中的委托和事件详解
- thingsboard|ThingsBoard 使用 REST API HTTP 方法获取遥测数据 属性数据等
- ESP8266|ESP8266使用AT命令上传数据到ONE NET(HTTP方式)
- 前端|nginx处理前端跨域问题 -详解 windows 和 mac 下的配置
- servlet和java区别_JavaWeb中的jsp和servlet的区别
- 1-3|1-3 用户,组织和项目页面