最近接手了公司兩個項目，一個PC端後臺管理系統，一個app端項目，當然使用的依然是熟悉“Vue全家桶”那套！但是，當我打開項目時，裡面的代碼是這樣的（路由模塊）： 就是所有路由配置都放到一個index.js中，這多少還是讓我有點驚呆的，顯然，項目會越做越大，模塊會越加越多，那這種不分模塊的架構方式明 ...
最近接手了公司兩個項目，一個PC端後臺管理系統，一個app端項目，當然使用的依然是熟悉“Vue全家桶”那套！但是，當我打開項目時，裡面的代碼是這樣的（路由模塊）：
就是所有路由配置都放到一個index.js中，這多少還是讓我有點驚呆的，顯然，項目會越做越大，模塊會越加越多，那這種不分模塊的架構方式明顯給以後帶來很大維護困難，index.js文件會變得異常龐大...
所以，我便想趁現在代碼量還在可控的情況下趕緊優化一下吧！於是，跟領導說明瞭用意，並很快得到了首肯！所以就開始動起來了~
1. 分模塊：
首先，當然是要把不同模塊的路由分離開來了（本來想只把新加入的功能模塊做處理，老模塊保留現狀，因為複製、粘貼也是很耗體力的。但是，想想所幸現在項目還不大，再加上目前雖然不年輕但還算力壯，且還稍微有點強迫症的催動下，所以還是決定將現在有代碼拆開...）,心裡小小鬥爭一下之後，就開幹了！於是，就有了這樣的結構：
同時，讓index.js的全部代碼縮減成了這樣：
為啥你module里的文件名會是.routes.js 呢？這個嘛...
其實是個小技巧，並不是便性規定， 1. 為了方便正則匹配，2. 為了標識文件的功能，讓人一看就是知道這是路由文件...
啥正則匹配？
2. 自動導入：
為啥能將index.js縮減成這樣呢？其實就是代碼所示，利用了require.context來實現了自動導入...
require.context：是一個webpack提供的api,通過執行require.context函數遍歷獲取到指定文件夾（及其下子文件夾）內的指定文件，然後自動導入。
語法：require.context(directory, useSubdirectories = false, regExp = /^.//); 三個參數分別代表：
. directory 讀取的目錄；
. useSubdirectories 是否遍歷目錄的子目錄
. regExp 匹配文件的正則表達式 （即你要讀取目錄下什麼類型的文件，就是這個正則匹配）
require.context() 返回一個函數，該函數包含三個屬性 resolve()、keys()、id 具體定義請自行到百度上谷歌一下！
我們這裡用到了keys()： 返回匹配成功模塊的名字組成的數組：
importAll()是對代碼進行了一個封裝，裡面的r.keys() 得到的將是：
['./action.routes.js', './apply.routes.js', './base.routes.js', './common.routes.js', './cost.routes.js', './liveActivity.routes.js']
可以看到拿到的就是module目錄里的所有文件；
拿到數組文件之後便可對其進行forEach，然後通過 `r(key).default`拿到文件的內容也就是各種模塊寫好的路由配置，從而也就實現了路由模塊自動導入功能，從此，每次只需要要將新加的xxx.routes.js文件放入module目錄（也可以是裡面的子目錄），也就不必手動再import了！
其實，require.context，還能實現其他模塊的自動導入功能，比如：Vue官網提到的實現基礎組件的全局註冊（Vue官網的示例），以及對ajax Api模塊化管理並自動引入等等...
