webpack 編譯es6 動態引入 import() 時不能傳入變數，例如dir ='path/to/my/file.js' ； import(dir),而要傳入字串 import(‘path/to/my/file.js')，這是因為webpack的現在的實現方式不能實現完全動態。

但一定要用變數的時候，可以通過字串模板來提供部分資訊給webpack；例如import(./path/${myFile}),這樣編譯時會編譯所有./path下的模組，但執行時確定myFile的值才會載入，從而實現懶載入。

import語法參考資料如下：點選進入

修改後

補充知識：由vue-router中component: ()=>import()引發的ES6箭頭函式的語法問題

Vue-router動態載入元件的語法方式為:

component: ()=>import()

最近在專案中不下心寫成了

component: ()=>{import()}

由此引發了ES6中箭頭函式語法的問題：

1. ()=>: 沒有{}的時候，箭頭函式指向的就是這個函式的返回值(對應的元件,這個路由就會顯示內容啦)；

2.()=>{}: 有{}的時候，箭頭函式在沒有指明return的時候什麼都不返回(對應的元件,這個路由就什麼都不會顯示啦)

另外，webpack3的Magic Comments，可以指定打包檔案是的chunk的名字，寫法如下:

component: ()=>import(/* webpackChunkName: "chunkName" */ )

以上這篇解決vue的router元件component在import時不能使用變數問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。