详解Vue.js项目API、Router配置拆分实践

大佬教程收集整理的这篇文章主要介绍了详解Vue.js项目API、Router配置拆分实践，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

前后端分离开发方式前端拥有更高的控制权

随着前端框架技术的飞速发展，Router这个概念也被迅速普及到前端项目中，在早期前后的没有分离的时期下，并没有明确的路由概念，前端页面跳转大多是通过后端进行请求转发的，比如在Spring MVC项目中，进行一个页面跳转如下（画红线部分）：

一个超链接，链接的href=/manager，这样这个超链接被转发到scs/waitFollowed路径指定的页面。

前后的分离后，前端页面跳转的方式发生了变化，不再需要后端处理了，数据交换方式也改变了，由此前端需要定义Router配置文件，需要定义API配置文件。在项目的权限配置管理中，完全不需要后端什么事了，可以说，权限配置表可以单独拿出来由前端维护了。

比如这个url字段，在前后端不分离的情况下，严重依赖于后端，url就是后端接口地址，如果需要更改就需要后端修改代码修改接口地址，而现在，前端可以自由控制url的值是什么了。

在接口层面，前端也会有自己的配置文件，可以对后端提供的接口进行重命名，组合等。比如

前端都统一使用模块名+接口名的方式管理，管后端提供的接口叫啥已经不重要，在视觉上和维护上都比较方便。在页面上使用，查询起来也很直观：

看到DISTRBUTE().Leads.dataGrid这个接口，就知道这是DISTRBUTE模块下Leasd功能下的列表查询接口

Vue.js中的API、Router配置

在Vue.js项目下，一开始我们只使用一个api.config.js配置文件，所有的接口都定义在这里面，router也一样，都配置在一个router.config.js中，下面是我们项目中API配置文件

可以看到，很多的业务模块，很多的接口，已经达到了570多行，随着业务进一步推进，接口快速膨胀，文件越来越大。

这时候迫切需要拆分，把不同的业务模块单独拆分为一个个API配置文件。同样，我们来看看拆分前的Router配置文件：

这样router一多最大的缺点就是会导致router命名冲突。

拆分！拆分！拆分！

首先考虑API配置文件怎么拆分，对于接口，我们肯定有多套环境，多套环境那么API的URL也不一样，拆分成多个文件后多个文件需要共用同一个获取apiBase的方法，所以这个apiBase就要写在公共的地方，在这里原来的api.config.js就变成了公共配置，apiBase就放在此文件内。

默认环境 if(hostname === 'crm.dunizb.cn') { //正式环境 API_BASE_URL = 'http://api.dunizb.cn'; } else if(hostname === 'admin.dunizb.com') {//公网测试环境 API_BASE_URL = 'http://testapi.dunizb.com'; } else if(hostname === 'manager.dunizb.com') {//内网测试环境 API_BASE_URL = 'http://test2api.dunizb.com'; } return API_BASE_URL; }

大佬总结

以上是大佬教程为你收集整理的详解Vue.js项目API、Router配置拆分实践全部内容，希望文章能够帮你解决详解Vue.js项目API、Router配置拆分实践所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。