解决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必学知识点之forEach()的使用
在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，这时候就需要用到forEach()了，下面这篇文章主要给大家介绍了关于Vue必学知识点之forEach()使用的相关资料，需要的朋友可以参考下
2021-05-05
vue中实现左右联动的效果
这篇文章主要介绍了vue中实现左右联动的效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-06-06
vue项目之webpack打包静态资源路径不准确的问题
这篇文章主要介绍了vue项目之webpack打包静态资源路径不准确的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue.js第一天学习笔记（数据的双向绑定、常用指令）
这篇文章主要为大家分享了Vue.js第一天的学习笔记，包括数据的双向绑定、常用指令学习,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
vue2 vue3中使用Echarts详细
这篇文章主要给大家介绍的是vue2 vue3中使用Echarts的相关资料，下面文章会详细介绍该内容，感兴趣的小伙伴不要错过哟
2021-09-09
详解vue移动端日期选择组件
小编给大家整理了关于vue移动端日期选择组件的知识点总结，希望能够给读者带来帮助，一起学习参考下。
2018-02-02
如何用webpack4带你实现一个vue的打包的项目
这篇文章主要介绍了如何用webpack4带你实现一个vue的打包的项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
浅析vue如何实现手机横屏功能
在项目开发中有时候需求需要手动实现横屏功能,所以这篇文章主要为大家详细介绍了如何使用Vue实现手机横屏功能,需要的小伙伴可以参考一下
2024-03-03
一文详解Vue3响应式原理
这篇文章主要介绍了一文详解Vue3响应式原理，文章通过与vue2.x 的响应式做对比详解展现出了Vue3响应式原理详情，感兴趣的小伙伴可以参考一下
2022-06-06
基于vue实现简易打地鼠游戏
这篇文章主要为大家详细介绍了基于vue实现简易打地鼠游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08