解决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)
}
...

总结

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

您可能感兴趣的文章:

Vue结合后台导入导出Excel问题详解
这篇文章主要介绍了Vue结合后台导入导出Excel问题详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
vue下跨域设置的相关介绍
本篇文章主要介绍了vue下跨域设置的相关介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue+iview实现手机号分段输入框
这篇文章主要为大家详细介绍了vue+iview实现手机号分段输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue + Scss 动态切换主题颜色实现换肤的示例代码
这篇文章主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue异步更新机制及$nextTick原理的深入讲解
最近在学习一些底层方面的知识,所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点,下面这篇文章主要给大家介绍了关于Vue异步更新机制及$nextTick原理的相关资料,需要的朋友可以参考下
2022-04-04
vue实现弹幕功能
这篇文章主要介绍了vue实现弹幕功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-10-10
vue3中的ref()详解
ref对象可以通过.value属性进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用，这篇文章主要介绍了vue3中的ref(),需要的朋友可以参考下
2023-05-05
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
这篇文章主要介绍了Vue.js 2.0 和 React、Augular等其他前端框架大比拼的相关资料,React 和 Vue 有许多相似之处,本文给大家提到，需要的朋友可以参考下
2016-10-10
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
这篇文章主要介绍了Vue.js实现一个漂亮、灵活、可复用的提示组件示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
vue 全选与反选的实现方法(无Bug 新手看过来)
下面小编就为大家分享一篇vue 全选与反选的实现方法(无Bug 新手看过来)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02