一、介绍
本文是基于 https://github.com/PanJiaChen/vue-admin-template 的模版进行搭建。在模板基础上的搭建过程中,提出以下可能遇到的问题:
1、如何mock接口数据?
大家都知道前后端开发速度不一定一致,有时候前端开发比较快,这个时候可以先进行mock数据进行测试。这个模板已经有mock例子了,因此下面会简单以mock菜单为例子做演示。通过讲菜单mock,顺便能够了解一下菜单如何动态添加的。
2、mock的api和后端api接口如何进行切换?
3、如果后端接口地址有多个,要如何进行多代理接口地址配置?
4、如何区分开发环境和生产环境的api?
二、对上述问题的回答
问题1、如何mock接口数据?
项目下载下来可以看到这个目录。以下新加了tree.js文件,并在index.js中引入
接下里开始讲菜单的mock。
mock/user.js 在这里写入要获取到的菜单数据。
src/api/user.js 注意接口url要一致
src/store/modules/user.js 获取到菜单数据,转换格式,添加路由。
src/router/menuCorrect.js 为每个路由加component
src/router/lazyLoading.js 获取到每个页面的component
最终效果:(更改完mock记得重启项目)
问题2、mock的api和后端api接口如何进行切换?
在settings.js中添加参数
在.env.development中添加接口地址
通过参数进行本地和后端api切换
实现效果:
那么如果多个后端接口地址应该要如何进行切换?这就到了问题3。
问题3、如果后端接口地址有多个,要如何进行多代理接口地址配置?
在.env.development中添加接口地址
在调用接口的时候添加,可以直接覆盖。进一步了解可看 https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html
问题4、如何区分开发环境和生产环境的api?
在.env.production文件中,加入生产环境需要的接口地址就行了。