在webpack3中加載vue動態(tài)路由時是這樣的
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這樣動態(tài)引入路由的为肮。而在webpack4中還使用import的方式引入動態(tài)路由則會報錯了
error
很明顯灯抛，告訴我們找不到該模塊了血久。
PS: 造成這個情況的原因是webpack4中不在支持
import()方法動態(tài)引入文件命辖，僅限開發(fā)模式，生產(chǎn)模式是正常的传透，可以繼續(xù)使用import()動態(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" ], ... }
歡迎各位大佬指正錯誤湿痢。
