概述
通常的動(dòng)態(tài)組件導(dǎo)入方式
??vue中又是時(shí)候我們會(huì)使用到動(dòng)態(tài)組件導(dǎo)入，比如路由組件的動(dòng)態(tài)導(dǎo)入，一般類似路由組件的動(dòng)態(tài)導(dǎo)入的方式：
()=>import(path);
()=>defineAsyncComponent(()=>import(path))
vite中使用的錯(cuò)誤
但是這寫方式進(jìn)行動(dòng)態(tài)導(dǎo)入組件的時(shí)候在vite+vue3項(xiàng)目下都是不行的，開(kāi)發(fā)環(huán)境下給與如下的警告提示：
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import()
如果是打包完成之后進(jìn)行運(yùn)行就會(huì)出現(xiàn)類似如下的錯(cuò)誤：
TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:8080/view/home/test.vue
總之就是找不到組件。一開(kāi)始，我以為是路徑不對(duì)，最后查了好久才發(fā)現(xiàn)在vite中動(dòng)態(tài)導(dǎo)入組件這種方式根本不行。那vite不讓使用這種方式進(jìn)行動(dòng)態(tài)導(dǎo)入路由，總得給個(gè)解決方案吧……
解決方案
??后來(lái)查看官網(wǎng)VITE找到了如下模塊導(dǎo)入功能方式：
import.meta.glob(path)
const modules = import.meta.glob('./dir/*.js')
// vite 生成的代碼
const modules = {
'./dir/foo.js': () => import('./dir/foo.js'),
'./dir/bar.js': () => import('./dir/bar.js')
}
??這個(gè)時(shí)候出現(xiàn)了新的問(wèn)題就是這個(gè)path不能使用變量，只能是固定值，這個(gè)在官網(wǎng)中有圖下注意說(shuō)明：
1. 這只是一個(gè) Vite 獨(dú)有的功能而不是一個(gè) Web 或 ES 標(biāo)準(zhǔn)
2. 該 Glob 模式會(huì)被當(dāng)成導(dǎo)入標(biāo)識(shí)符：必須是相對(duì)路徑（以 ./ 開(kāi)頭）或絕對(duì)路徑（以 / 開(kāi)頭，相對(duì)于項(xiàng)目根目錄解析）或一個(gè)別名路徑（請(qǐng)看 resolve.alias 選項(xiàng))。
3. Glob 匹配是使用 fast-glob 來(lái)實(shí)現(xiàn)的 —— 閱讀它的文檔來(lái)查閱 支持的 Glob 模式。
4. 你還需注意，所有 import.meta.glob 的參數(shù)都必須以字面量傳入。你 不 可以在其中使用變量或表達(dá)式。
??既然可以使用通配符，所以我們就可以通過(guò)以下方式來(lái)實(shí)現(xiàn)組件的動(dòng)態(tài)導(dǎo)入功能：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-621876.html
const viteComponents = import.meta.glob("../**/*.vue");
{
component: viteComponents['../'+path],
}
也就是說(shuō)，組件在一開(kāi)始用已經(jīng)全部導(dǎo)入了，我們只是通過(guò)路徑獲取組件，所以只要匹配上路徑就能獲取到對(duì)應(yīng)的組件了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-621876.html
到了這里，關(guān)于VITE+VUE3動(dòng)態(tài)導(dǎo)入組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
