bootstrap-pagination数据全部加载到前端再进行处理_求助!vue单页项目如何改造路由使其能够进行分模块打包?...

最近遇到一个很难解决的问题,搜索了百度谷歌都没有相关的资料,有可能是我搜索的关键词不对或者是需要我换一种思路去解决,希望各位大佬能帮忙看一下怎么解决。问题目前是这样的,目前有个基于VUE的单页后台项目,框架用的是基于vue和element的vue-element-admin(https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fdashboard)。脚手架是基于vue-cli3构建的。

发现打包出来的js 是这样的

d1cd3698aa02ddd772dc0fad55f2416f.png

去查看一下 基本上 思路就是 app下有个对应不同路由路径然后动态去加载chunk文件。

但是问题来了:

业务开发上多个人负责不同模块,并打包出来文件去合并到主分支。

1、所以第一步是需要根据模块将JS分到不同的文件夹(这里肯定默认要关闭chunk),这个vue.config.js 配置可以实现,但也希望有比较好的方式。

2、每个文件夹必须相互独立,能够屏蔽掉别的路由分支,进行独立的打包(这样就是打包一个公共部分,以及所开发的模块下的路由路径)。打包完之后,线上环境可以直接把打包出来的模块JS文件覆盖或者添加到问题1所述下的对应模块文件夹下,并且程序运行正常,且会根据新添加的代码,在打包的页面上有所变化。

以上问题带有个人的思路,换一种解决方式也不是不行,所以下面就说一下为什么我想这么做,以便各位大佬看到以上两个问题行不通的情况下能给我一个新的思路!毕竟我是真的百度不到相关的方案,万分感谢!

由于项目业务线是一直不断的往里面添加业务内容。而我们坚持既然使用了VUE这种单页应用优异的特性,故而,我们不走mutipage模式的多页面开发,路由既然交给前端了,就不希望他再有传统的url跳转这种事情发生。

导致这个工程文件会不断不断的变大。vue-cli3有提供局部的模块调试方案 所以在dev环境下不受影响。但是!!!!

打包时间却会随着文件的不断变多会无限大,导致在项目达到一定业务体量的时候可能改一个线上BUG就得花几分钟时间去重新打包整个项目目录,再提交,效率极低。且多人开发时,基于不同模块开发,会有不同的分支,但打包的文件却一直是重复一个,那么,就必须合并工程文件到一个公共的环境,再在一个公共的环境进行打包,否则就会有分支不同步的现象出现。

我也希望能简化这个步骤,能直接在自己的分支打包文件(其他路由屏蔽),再把属于自己开发的那个模块文件夹里的JS文件提取出来提交到打包文件夹进行测试即可。这样即节省了开发流程的复杂度,也解决了后期维护时的反复提交的复杂度,还提高了打包的效率。

ps:之前有做过一个实验发现一个规律也可以分享一下,只要是使用了懒加载的模式加载路由或模块 那么不管是多少个子路由或嵌套了多少层的模块文件 其加载的对应js名都会在app.js里出现 ,故而 懒加载模式下的新增路由 永远无法合并到 原有打包出来的目录文件,因为app.js里找不到该文件名。其实解决问题的核心就是app.js 里的这个 路由路径问题(有没有什么方式可以把所有的路由地图 分离出app.js 并且 每次打包可以检测到所有的模块路径,并生成新的路由地图,但只打包想打包的那块模块的功能js,那么每次合并打包文件就是:

1、覆盖路由地图文件。2、覆盖或添加新的模块文件, 就搞定了。)

所以归纳下问题:

1、如何实现分工程文件的模块去打包页面,如何优雅的屏蔽掉其他无用模块路由(目前有试验过,就是粗暴的屏蔽对应路由。)

2、如果以上的方案是不合理的,也可以介绍一下 如何在这个单页应用项目未来可期会不断不断的增加业务产品线的情况下(这是一直一直长期增加的情况),能进行正常且高效的打包工作以及程序小组成员之间合理的分工合作和开发的有效机制?

这个问题困扰了我好久,百度不到合适的方案,或者我压根就是思路有问题,望各位大佬执教一番QAQ

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值