在webpack3中加載vue動(dòng)態(tài)路由時(shí)是這樣的
function filterAsyncRouter(asyncRouterMap) {
return asyncRouterMap.filter(route => {
if (route.component) {
// Layout組件特殊處理
if (route.component === 'Layout') {
route.component = Layout
} else {
route.component = loadView(route.component)
}
}
if (route.children != null && route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
})
}
const loadView = (view) => { // 路由懶加載
return () => import(`@/views/${view}`)
}
在webpack3中是支持import這樣動(dòng)態(tài)引入路由的。而在webpack4中還使用import的方式引入動(dòng)態(tài)路由則會(huì)報(bào)錯(cuò)了
error
很明顯，告訴我們找不到該模塊了。
PS: 造成這個(gè)情況的原因是webpack4中不在支持
import()方法動(dòng)態(tài)引入文件，僅限開(kāi)發(fā)模式，生產(chǎn)模式是正常的，可以繼續(xù)使用import()動(dòng)態(tài)引入
怎么解決？
- 使用
require方法引入，修改一下loadView方法
const loadView = (view) => { // 路由懶加載
return resolve => require([`@/views/${view}`], resolve)
}
- 使用
babel-plugin-dynamic-import-webpack
a. 安裝npm install babel-plugin-dynamic-import-webpack --save-dev
b. 配置.babelrc文件或者babel.config.js文件
.babelrc{ ... "plugins": [ "dynamic-import-webpack" ] ... }babel.config.jsmodule.exports = { ... presets: [ ..., "dynamic-import-webpack" ], ... }
歡迎各位大佬指正錯(cuò)誤。
