快捷導(dǎo)航

react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決

更新時(shí)間：2024年03月15日 10:47:56 作者：江一銘

這篇文章主要介紹了react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

正常的動(dòng)態(tài)組件導(dǎo)入方式

webpack搭建的項(xiàng)目，不管是react還是vue通常引入動(dòng)態(tài)組件基本這么寫：

const url = import(`../pages/${locale}`)  // vite不支持

or

const url = import(`../pages/${locale}/index.jsx`)  // vite不支持

這在vite架構(gòu)中，一般情況下開發(fā)不會(huì)有問題，但是使用build打包就會(huì)給出警告提示。

錯(cuò)誤信息：

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()

或者打完包之后：

TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:8080/pages/home/index.jsx

解決方案

這個(gè)需要熟讀vite官網(wǎng)教程了：https://cn.vitejs.dev/guide/features.html#glob-import

用法：

const modules = import.meta.glob('./dir/*.js')

// vite 生成的代碼
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}

import.meta.glob() 方法匹配某個(gè)菜單下的所有模塊，所以你還需要進(jìn)行遍歷。

例如：

我用react寫的話，因?yàn)闀?huì)有index.jsx的原因：

import.meta.glob('@/pages/*/*')

會(huì)匹配pages下的所有一級(jí)目錄

import.meta.glob('@/pages/*/*/*')

會(huì)匹配pages下的所有二級(jí)目錄

…以此類推

Glob 導(dǎo)入注意事項(xiàng)

這只是一個(gè) Vite 獨(dú)有的功能而不是一個(gè) Web 或 ES 標(biāo)準(zhǔn) 該 Glob 模式會(huì)被當(dāng)成導(dǎo)入標(biāo)識(shí)符：必須是相對路徑（以 ./開頭）或絕對路徑（以 / 開頭，相對于項(xiàng)目根目錄解析）或一個(gè)別名路徑（請看 resolve.alias 選項(xiàng))。

Glob 匹配是使用fast-glob 來實(shí)現(xiàn)的 —— 閱讀它的文檔來查閱支持的 Glob 模式。

你還需注意，所有 import.meta.glob的參數(shù)都必須以字面量傳入。你不可以在其中使用變量或表達(dá)式。

目錄結(jié)構(gòu)

封裝動(dòng)態(tài)方法

// locale為路徑名稱 例如：dashboard/analysis
function importLocale(locale) {
    // 判斷 / 出現(xiàn)次數(shù)  用于匹配菜單組件 （pages目錄下）
    let n = (locale.split('/')).length - 1;
    // vite動(dòng)態(tài)導(dǎo)入方法
    let modules = import.meta.glob('@/pages/*/*')

    // 組件層級(jí)  0一級(jí) ，1二級(jí)，2三級(jí)，3四級(jí)，4五級(jí)  
    // pages下一級(jí)目錄：commonview/index.jsx     login/index.jsx等等
    // pages下二級(jí)目錄：dashboard/analysis/index.jsx    system/user/index.jsx等等
    switch (n) {
        case 0:
            modules = import.meta.glob('@/pages/*/*')
            break;
        case 1:
            modules = import.meta.glob('@/pages/*/*/*')
            break;
        case 2:
            modules = import.meta.glob('@/pages/*/*/*/*')
            break;
        case 3:
            modules = import.meta.glob('@/pages/*/*/*/*/*')
            break;
        case 4:
            modules = import.meta.glob('@/pages/*/*/*/*/*/*')
            //最多給你5級(jí)菜單目錄，多了自己加。注意是菜單組件目錄不是普通組件，我覺得沒哪個(gè)傻逼會(huì)寫好幾級(jí)目錄，菜單是系統(tǒng)設(shè)置-菜單管理里面添加的，注意下就行。
            break;
        default:
            break;
    }

    let url = modules[`/src/pages/${locale}/index.jsx`]
    
    // 找不到本地組件直接403
    if (url == undefined) url = () => import(`../components/error403`)
    
    // const url = import(`../pages/${locale}`)  // vite不支持

    return url
}