使用vue-router懶加載,代碼如下:
但是npm run dev 的時候 babel-loader報錯如下:
查閱各種資料終於解決。
問題原因:
這種情況下的 import 屬於異步引用組件,需要特殊的babel-loader處理。
解決方法:
先安裝babel用來編譯import異步引用方法的模塊 babel-plugin-syntax-dynamic-import
cnpm install babel-plugin-syntax-dynamic-import -D
在.bablerc中引入syntax-dynamic-import插件
{
"presets": ["env"],
"plugins": ["syntax-dynamic-import"]
}
參考資料:
https://webpack.docschina.org/guides/code-splitting/#動態導入-dynamic-imports-
https://segmentfault.com/q/1010000011576199