使用webpack.require优化vue项目的路由

最新推荐文章于 2022-07-14 16:11:28 发布

weixin_34090562

最新推荐文章于 2022-07-14 16:11:28 发布

阅读量162

点赞数

文章标签： webpack javascript ViewUI

原文链接：https://juejin.im/post/5ab86990f265da238532d95e

版权

之前做一个后台系统的时候，前期路由也就十多个，就是使用的文档中的那种写法：

import Vue from 'vue';    

const Login = () => import('@/components/login/login');       
const Index = () => import('@/components/home/index');     
// balaba.......前期少量的路由                        
export default new Router({                                        
routes: [ 
    {                               
      path: '/login',                     
      name: 'Login',                   
      component: Login,                 
    },
    {                     
      path: '/home',                
      redirect: '/operation/info/list',                  
      name: 'home',
    },                      
    //babal..........前期少量的路由     
    ])         
复制代码

在后期需求越来越来之后，整个项目的页面达到了200+，此时的路由用之前的写法无疑显得特别冗余，且在团队协作的时候同时修改此文件容易冲突。

上图是项目后期部分路由对应文件的引入，此时的项目特别难以维护。为了解决这个问题，我们项目使用了webpack.require这个方法解决。引用官方定义使用 require.context() 方法来创建自己的上下文（模块）。你可以给这个方法传3个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，一个匹配文件的正则表达式。
既： require.context('../view',true,/\.(vue|js)$/),第一个参数指的是要检索的文件路径，第二个参数是指是否检索子目录，第三个参数需要传入一个正则表达式来匹配被检索目录下符合正则的文件（如上正则为匹配被检索目录所有vue/js文件）。
最终，我们的router.js从几百行的路由配置优文件化成了仅仅几十行代码的文件。
参考文章：https://github.com/wuchangming/blog/blob/master/docs/webpack/require-context-usage.md

转载于:https://juejin.im/post/5ab86990f265da238532d95e