需求：當我vue-routes配置的時候，嫌棄require('')引入的路徑太長，想用變量替換他，為了美觀，也沒了精簡代碼。 當你在開發一個大型單頁面應用的時候，項目之初一般做法是所有的路由規則都維護在一個route.js的文件里。 ``` const router = new VueRouter({ routes: routes }) // routes.js const routes = { path: 'usermanage', component: require('page/systemManagement/usermanage/usermanage.vue'), children: [ { path: 'student_manage', component: r => require.ensure([], () => r(require('page/systemManagement/usermanage/usermanage.student_manage.vue'))) }, { path: 'user_audit', component: r => require.ensure([], () => r(require('page/systemManagement/usermanage/usermanage.user_audit.vue'))) }, { path: 'role_permission', component: r => require.ensure([], () => r(require('page/systemManagement/usermanage/usermanage.role_permission.vue'))) }, { path: 'role_assign', component: r => require.ensure([], () => r(require('page/systemManagement/usermanage/usermanage.role_assign.vue'))) }, { path: 'class_manage', component: r => require.ensure([], () => r(require('page/systemManagement/usermanage/usermanage.class_manage.vue'))) } ] }; ``` 這里的require.ensure上一篇文章介紹了：webpack的語法，實現按需加載的。 隨著業務代碼的增長路由很快會變成： 剛開始發現路徑太長，用一個變量替換，還用es6語法 const user_path = `page/systemManagement/usermanage/`; 上邊的component改為了 component：r=>(require(`${user_path}usermanage.vue`)) 報錯了，剛開始以為是es6語法寫錯了，改成字符串的寫法，還是報錯，我就覺得這不應該了，一個念頭飄過，require不支持變量的寫法，baidu，google…… oh，小樣，果然如此，node不支持，不過也發現了另外一個好東西，require.context。 簡單說下context()的用法：[官網地址](http://www.css88.com/doc/webpack2/guides/dependency-management/) require的context方法 你還可以使用 require.context() 方法來創建自己的上下文（模塊）。 你可以給這個方法傳3個參數：要搜索的文件夾目錄，是否還應該搜索它的子目錄，一個匹配文件的正則表達式。 webpack會在構建的時候解析代碼中的 require.context() 。 語法如下： require.context(directory, useSubdirectories = false, regExp = /^\.\//) 示例: require.context("./test", false, /\.test\.js$/); // （你創建了）一個test文件夾下面（不包含子目錄），能被require請求到，所有文件名以 `.test.js` 結尾的文件形成的上下文（模塊）。 require.context("../", true, /\.stories\.js$/); // （你創建了）一個父級文件夾下面（包含子目錄），所有文件名以 `.stories.js` 結尾的文件形成的上下文（模塊）。 上下文模塊 API 一個上下文模塊導出一個（require）方法，這個方法可以接收一個參數：請求的對象。 A context module exports a (require) function that takes one argument: the request. 導出的方法有3個屬性： resolve, keys, id。 ~~~ resolve 是一個函數，它返回所請求的對象被解析后得到的模塊id。 keys 也是一個函數，它返回一個數組，由所有可能被上下文模塊處理的請求的對象（譯者注：參考下面第二段代碼中的key）組成。 比如，在你想引入一個文件夾下面的所有文件，或者引入能匹配正則表達式的文件，你可以這樣： function importAll (r) { r.keys().forEach(r); } importAll(require.context('../components/', true, /\.js$/)); var cache = {}; function importAll (r) { r.keys().forEach(key => cache[key] = r(key)); } importAll(require.context('../components/', true, /\.js$/)); // 在構建時，所有被require的模塊都會被存到（上面代碼中的）cache里面。 ~~~ 借鑒了網上內容 [傳送門](https://github.com/wuchangming/blog/blob/master/docs/webpack/require-context-usage.md) 但是直接引用到vue-route里邊還是有問題的，你還需要像上邊提到的例子中，有多少子路由，還得在子頁面中引入自己相關的路由，所以，為了一個文件就搞定的事，我開始了漫長且興奮的研究。 ok，過程的嘗試和研究就不細說了，直接上代碼。當然，你也可以先自己研究，實在出不來，再查看我的代碼，畢竟，你可以很清楚的明白他的實現過程。 ~~~ { path: 'usermanage', component: r => require.ensure([], () => r(require('page/systemManagement/usermanage/usermanage.vue'))), children: (r => { return r.keys().map(key => {return { path: key.split('.')[2], component: r(key) }}); })(require.context('page/systemManagement/usermanage/',false,/usermanage\.\w+\.vue$/)), } ~~~ 上例中的path 自己可以適當的改下，用正則都行。 不過遺憾的是，require.comtext()中第一個參數，依舊只能寫字符串路徑。其實，這個才是我要解決的問題。 到最后也是沒有解決。 不過還好學到了另外的知識，分享出來。 ok，這么高大上的東西，留在項目中，讓參與項目的人顫抖吧。開玩笑啦，大家一起學習，一起進步。