vue从mock数据过渡到使用后台接口
说明:
最近在搭建一个前端使用vue-element-admin，后端使用springBoot的项目。
由于vue-element-admin使用的是mock的模拟数据跑起来的项目,所以在开发过程中难免会遇到mock和真实数据之间的混合使用,既要原先的项目跑起来,也要真实接口数据可以使用
解决方案:
在github上vue-element-admin有issues这个就方便多了,我想上面肯定有人也遇到我这种问题,就直接在上面搜索问题,结果还真有,下,我贴一段上面的大佬对于这个问题的描述:
mock-server就是一个web server，默认监听在9528端口（可能是vue-cli-service反代理把请求转发给mock-server的），并没有改写xhr对象的请求方法，因此不会对请求作拦截。可以帮它当做一个单独的web server，只不过它会随着vue-cli-service启动。
假定你的环境变量VUE_APP_BASE_API的值是http://foo.bar.com/api，如果是默认的mock数据的话，那么mock-server生成的资源会是这样的格式http://localhost:9528/http://foo.bar.com/api/vue-admin-template/user/login。参考mock-server.js
以上说到，mock-server不会拦截请求，实际的请求还是会发给http://foo.bar.com/api/vue-admin-template/user/login，因此是不能通过mock-server实现这个需求的。
PS：当VUE_APP_BASE_API是/dev-api这样不包含协议和主机名的值时，请求发给同域的web server了，即http://localhost:9528，刚好是mock-server的服务。
要实现同时使用mock和真实api，有两种方案：
- 多个server，参考：vue从mock数据过渡到使用后台接口 https://www.cnblogs.com/xiayuscc/p/11063590.html
真实的api也可以当做一个mock server，通过配置proxy规则来实现 - 启用纯前端mock
修改xhr对象，拦截请求。符合mock规则的请求直接走mock
两个方法我都实验了一下,原理上都可行,问题在于什么时候走真实数据,什么时候走mock数据,第一个方法:他采用的是辨别mock接口的url,我好像怎么用都不行,最后结果是mock和接口都调不通了,不知道哪里出的问题,第二个方法:启用纯前端的mock,然后我就去了vue-element-admin的官方文档上研究了一下,感觉和方法一差不多,一样的结果.mock和接口都跑不了,
后来没办法,疯狂百度看各路大佬的解决方案,出奇的一致百分之90都是百度到这种方法,剩下百分之10什么妖魔鬼怪都出来了0.0
最后总结没办法一点一点尝试,发现是before属性和after属性搞的鬼,我最后的方案是采用的before,在默认情况下使用before调用mock数据,如果找不到数据时跑接口数据代码如下(打双引号的都是前人大佬的方法,弟弟跑不通,索性留着以后还可以再研究0.0)
devServer: {
port: port, // 访问端口号
open: true, // 编译完成打开网页
host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
overlay: {
warnings: false,
errors: true
},
before: require('./mock/mock-server.js'),
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
// [process.env.VUE_APP_BASE_API + '/user/login']: {
// target: `http://localhost:${port}/`,
// changeOrigin: true,
// pathRewrite: {
// ['^' + process.env.VUE_APP_BASE_API]: ''
// }
// },
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:${port}/mock`,
target: 'http://192.168.1.117:9090/',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
// after: require('./mock/mock-server.js')
// before: require('./mock/mock-server.js')
},
总结下来就是vue配置真难!!!!
愿所有前端的头发都被善待
