在寫 vue+element 從后臺獲取數據寫導航欄 時，當我加載動態路由，import() 總是失敗。

假設 path: “@/views/Home.vue”，name: “Home”。

一、使用 import() 語法加載組件

參考：“Cookysurongbin”的 解決vue動態路由異步加載import組件,加載不到module的問題

arr[i].children[j].component = () => import("@/views/Home.vue") //沒有問題 arr[i].children[j].component = () => import(`${arr[i].children[j].component}`) //報錯

1. 原因： 應該是在 webpack，webpack 編譯 es6 動態引入 import() 時不能傳入變量，因為 webpack 的現在的實現方式不能實現完全動態。

2. 解決辦法： 可以通過字符串模板來提供部分信息給 webpack。

例如：import(@/${path}), 這樣編譯時會編譯所有 @/views 下的模塊，但運行時確定 path 的值才會加載，從而實現懶加載。
如果寫了@給webpack還是不能識別，那么可能你需要多些幾級的路徑，如：

arr[i].children[j].component = () => import(`@/views/${name}.vue`);

由于我粗心大意，不小心漏掉了 () => ，這樣寫完之后，報錯（原本是沒有錯的）：[Vue warn]: Failed to mount component: template or render function not defined.，很多文章上說使用 require 加載組件。

二、使用 require 加載組件

arr[i].children[j].component = (resolve) => require([`@/views/${name}.vue`], resolve);//成功

具體的可以去看掘金上 webpack動態導入和require.context分析及使用注意 這篇文章。

因為我讓后臺在每個子路由中都返回了 component 字段，所以上面這種情況不太現實。

arr[i].children[j].component = resolve => require([`@/views/${arr[i].children[j].component}.vue`],resolve); //報錯

參考了 “ddx2019” 的 動態路由中，有一步需將后端傳回的component 的字符串模式，改為我們前端路由需要的component模式,報錯Cannot find module

function _import(str) { // views文件夾下的Home組件，傳入的格式為 'Home'return function (resolve) {require([`@/views${str}.vue`], resolve);}; }//使用 arr[i].children[j].component = _import(arr[i].children[j].component);

總結

以上是生活随笔為你收集整理的import() 动态加载component组件失败的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。