解決vue動態(tài)路由異步加載import組件,加載不到module的問題
報錯信息應該是這樣的
webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10)
路由信息由后端給出，那么前端需要動態(tài)加載路由，同時component的路徑也是后端給出，但是動態(tài)加載該路徑會報錯
如：
// 假如path = '@/views/user'
const com = () => import(path) // 這樣會報錯哦
const com2 = () = > import('@/views/user') // 這樣寫死的字符串就可以
原因應該是在webpack，webpack 編譯es6 動態(tài)引入 import() 時不能傳入變量，因為webpack的現(xiàn)在的實現(xiàn)方式不能實現(xiàn)完全動態(tài)。
解決辦法：
可以通過字符串模板來提供部分信息給webpack，例如import(`@/${path}`), 這樣編譯時會編譯所有@/views下的模塊，但運行時確定path的值才會加載，從而實現(xiàn)懶加載。
如果寫了@給webpack還是不能識別，那么可能你需要多些幾級的路徑，如import(`@/views/${path}`)
補充知識：vue中使用import路由懶加載報錯解決方法
一般情況下都會正常運行，但當我們運行npm run dev時卻報錯
原因是import屬于異步引用組件，需要babel-loader處理
所以我們需要安裝
npm install babel-plugin-syntax-dynamic-import -D
這是用來編譯import異步引用方法的模塊
然后在.babelrc中引入這個插件
{
“plugin”: [‘syntax-dynamic-import']
}
以上這篇解決vue動態(tài)路由異步加載import組件,加載不到module的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot>?表示，父組件可以在這個占位符中填充任何模板代碼，如?HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
今天小編就為大家分享一篇vue 組件的封裝之基于axios的ajax請求方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue實現(xiàn)div可拖動位置也可改變盒子大小的原理
這篇文章主要介紹了vue實現(xiàn)div可拖動位置也可改變盒子大小，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
甘特圖是一種條狀圖,直觀展示項目進展隨時間的走勢及聯(lián)系,其中,項目時間由橫軸表示,項目活動由縱軸表示,本文給大家介紹了Vue echarts繪制甘特圖的實現(xiàn)方法,并有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-03-03
vue中el-table實現(xiàn)自動吸頂效果(支持fixed)
本文主要介紹了vue中el-table實現(xiàn)自動吸頂效果，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
laravel-admin 與 vue 結合使用實例代碼詳解
由于 Laravel-admin 采用的是 pjax 的方式刷新頁面，意味著很多頁面刷新的操作，這篇文章主要介紹了laravel-admin 與 vue 結合使用,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了詳解vue-router和vue-cli以及組件之間的傳值,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
VueX學習之modules和namespacedVueX詳細教程
這篇文章主要為大家介紹了VueX學習之modules和namespacedVueX詳細教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache
這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
VueX?mapGetters獲取Modules中的Getters方式
這篇文章主要介紹了VueX?mapGetters獲取Modules中的Getters方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08