解决Vite无法分析出动态import的类型,控制台出警告的问题
作者：无言非影
这篇文章主要介绍了解决Vite无法分析出动态import的类型,控制台出警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题
在main.ts中需要自动注册全局组件
运行vite的时候，控制台会报警告：
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.
当前的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)
// 自动注册全局组件
const modules = import.meta.glob('./components/**/index.ts')
for (const path in modules) {
// 根据路径导入组件
const component = await import(path)
// 注册组件
app.use(component.default)
}
app.mount('#app')
分析
这个错误提示来自 Vite 的 import 分析插件:
这个错误是因为 Vite 无法分析出上面动态 import 的类型,因为它是以变量的形式,而不是字面量形式写的。
根据提示,可以通过以下两种方式修复：
- 1.将动态导入路径改写为字面量,如
import('./component/xx') - 2.在 import 语句后面添加:
/* @vite-ignore */忽略这个 warning
因为我需要动态引入, 所以我使用第二种方式忽略警告,因为路径需要动态生成,无法写成字面量。
解决方案
在 import 语句后面添加:/* @vite-ignore */ 忽略这个 warning
...
// 自动注册全局组件
const modules = import.meta.glob('./components/**/index.ts')
for (const path in modules) {
// 根据路径导入组件
const component = await import(/* @vite-ignore */path)
// 注册组件
app.use(component.default)
}
...
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。