iczer的vue-antd-admin项目,逐步平滑迁移moc
2020-11-11 本文已影响0人
万州客
这个需求,在实战中蛮有用的。但没有看到网上太多文档,就自己hack了一个思路。供指正。
需求
在前后端分离的项目开发中,前后端的开发步骤和进度是不一致的。有时,前端为了不等待后端的API开发进度,会自己mock一个服务,来实现效果的展示。
等后端开发完成之后,才切到真正的后端API。
这里有一个小小的问题,一般的情况下,会改一个配置,或是直接禁用mock,就直接访问后端了。BUT,但是,如果想一个一个路由的切呢?(比如,一个人开发前后端分离模式时,可以交替编写前后端,又或是后端的API是其它人分批提供的)。
这时,就需要我们可以自主的选择哪些API仍然使用MOCK,哪些API则使用正式的后端。
实现
这个方案是基于iczer的vue-antd-admin(https://gitee.com/iczer/vue-antd-admin)项目。如果是vue-element-admin之类的,实现方案也是大同小异。
这个方案的核心,就是区分MOCK的后端URL地址和真正提供测试服务的后端URL。
一,在项目根目录的.env.depelopment文件里新增一个REAL_URL
VUE_APP_API_BASE_URL=http://mock.localhost.com
VUE_APP_API_REAL_URL=http://localhost:8085
为了不改动更多代码,VUE_APP_API_BASE_URL保持不变,VUE_APP_API_REAL_URL作为真实的后端地址。.env文件一般用于生产环境,前后端肯定全通,也就不必要调整
二,在services目录下的api.js文件中,自定义使用路由的后端地址
//跨域代理前缀
// const API_PROXY_PREFIX='/api'
// const BASE_URL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE_URL : API_PROXY_PREFIX
const BASE_URL = process.env.VUE_APP_API_BASE_URL
const REAL_URL = process.env.VUE_APP_API_REAL_URL
module.exports = {
LOGIN: `${REAL_URL}/login`,
ROUTES: `${BASE_URL}/routes`
}
比如,在这种情况下,/login用真实后端API,而/routes,依旧使用mock服务。更多路由依此切换,完美解决~~~