使用webpack.require優化vue項目的路由

以前作一個後臺系統的時候，前期路由也就十多個，就是使用的文檔中的那種寫法：

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