解决Vite无法分析出动态import的类型,控制台出警告的问题

更新时间：2024年03月15日 10:08:06 作者：无言非影

这篇文章主要介绍了解决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)
}
...

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

element vue Array数组和Map对象的添加与删除操作
这篇文章主要介绍了element vue Array数组和Map对象的添加与删除功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
Vue文件配置全局变量的实例
今天小编就为大家分享一篇Vue文件配置全局变量的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue实现仿淘宝结账页面实例代码
本文是小编给大家分享的vue实现仿淘宝结账页面实例代码，主要功能是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面，具体实例代码大家参考下本文
2017-11-11
vue使用高德地图实现轨迹显隐效果
本文主要介绍了在vue中如何使用高德地图实现轨迹显隐的功能,包括了相关代码的编写和具体实现步骤,对于想要在自己的项目中使用这一功能的开发者有一定的参考价值,希望大家对此有所帮助,同时也欢迎大家多多支持脚本之家
2024-10-10
vue3 element-plus 实现表格数据更改功能详细步骤
这篇文章主要介绍了vue3 element-plus实现表格数据更改功能,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
Vue中实现3D标签云的详细代码
本文通过实例代码给大家介绍vue实现3D标签云的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2021-07-07
vue项目build打包后部分样式错乱的解决
这篇文章主要介绍了vue项目build打包后部分样式错乱的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue安装less-loader依赖失败问题及解决方案
这篇文章主要介绍了vue安装less-loader依赖失败问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue分页组件的封装方法
这篇文章主要为大家详细介绍了Vue分页组件的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
使用Vue写一个datepicker的示例
这篇文章主要介绍了使用Vue写一个datepicker的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01