快捷導(dǎo)航

解決Vite無(wú)法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問(wèn)題

更新時(shí)間：2024年03月15日 10:08:06 作者：無(wú)言非影

這篇文章主要介紹了解決Vite無(wú)法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問(wèn)題

在main.ts中需要自動(dòng)注冊(cè)全局組件

運(yùn)行vite的時(shí)候，控制臺(tái)會(huì)報(bào)警告：

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() call to suppress this warning.

當(dāng)前的vite版本： “vite”: “^4.4.5”

src\main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { store, key } from './store'
import elementPlus from './plugins/element-plus'

// 加載全局樣式
import './styles/index.scss'
const app = createApp(App)
app.use(router)
app.use(store, key)
app.use(elementPlus)

// 自動(dòng)注冊(cè)全局組件
const modules = import.meta.glob('./components/**/index.ts')

for (const path in modules) {
  // 根據(jù)路徑導(dǎo)入組件
  const component = await import(path)

  // 注冊(cè)組件
  app.use(component.default)
}
app.mount('#app')

分析

這個(gè)錯(cuò)誤提示來(lái)自 Vite 的 import 分析插件:

這個(gè)錯(cuò)誤是因?yàn)?Vite 無(wú)法分析出上面動(dòng)態(tài) import 的類型,因?yàn)樗且宰兞康男问?而不是字面量形式寫(xiě)的。

根據(jù)提示,可以通過(guò)以下兩種方式修復(fù)：

1.將動(dòng)態(tài)導(dǎo)入路徑改寫(xiě)為字面量,如 import('./component/xx')
2.在 import 語(yǔ)句后面添加:/* @vite-ignore */ 忽略這個(gè) warning

因?yàn)槲倚枰獎(jiǎng)討B(tài)引入, 所以我使用第二種方式忽略警告,因?yàn)槁窂叫枰獎(jiǎng)討B(tài)生成,無(wú)法寫(xiě)成字面量。

解決方案

在 import 語(yǔ)句后面添加:/* @vite-ignore */ 忽略這個(gè) warning

...
// 自動(dòng)注冊(cè)全局組件
const modules = import.meta.glob('./components/**/index.ts')

for (const path in modules) {
  // 根據(jù)路徑導(dǎo)入組件
  const component = await import(/* @vite-ignore */path)

  // 注冊(cè)組件
  app.use(component.default)
}
...

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue必學(xué)知識(shí)點(diǎn)之forEach()的使用
在前端開(kāi)發(fā)中，經(jīng)常會(huì)遇到一些通過(guò)遍歷循環(huán)來(lái)獲取想要的內(nèi)容的情形，這時(shí)候就需要用到forEach()了，下面這篇文章主要給大家介紹了關(guān)于Vue必學(xué)知識(shí)點(diǎn)之forEach()使用的相關(guān)資料，需要的朋友可以參考下
2021-05-05
vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果
這篇文章主要介紹了vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-06-06
vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue.js第一天學(xué)習(xí)筆記（數(shù)據(jù)的雙向綁定、常用指令）
這篇文章主要為大家分享了Vue.js第一天的學(xué)習(xí)筆記，包括數(shù)據(jù)的雙向綁定、常用指令學(xué)習(xí),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
vue2 vue3中使用Echarts詳細(xì)
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關(guān)資料，下面文章會(huì)詳細(xì)介紹該內(nèi)容，感興趣的小伙伴不要錯(cuò)過(guò)喲
2021-09-09
詳解vue移動(dòng)端日期選擇組件
小編給大家整理了關(guān)于vue移動(dòng)端日期選擇組件的知識(shí)點(diǎn)總結(jié)，希望能夠給讀者帶來(lái)幫助，一起學(xué)習(xí)參考下。
2018-02-02
如何用webpack4帶你實(shí)現(xiàn)一個(gè)vue的打包的項(xiàng)目
這篇文章主要介紹了如何用webpack4帶你實(shí)現(xiàn)一個(gè)vue的打包的項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能
在項(xiàng)目開(kāi)發(fā)中有時(shí)候需求需要手動(dòng)實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下
2024-03-03
一文詳解Vue3響應(yīng)式原理
這篇文章主要介紹了一文詳解Vue3響應(yīng)式原理，文章通過(guò)與vue2.x?的響應(yīng)式做對(duì)比詳解展現(xiàn)出了Vue3響應(yīng)式原理詳情，感興趣的小伙伴可以參考一下
2022-06-06
基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08