vite动态引入报错,vite配置vue-router,封装动态导入控制台报错问题

文章讲述了在Vite构建的项目中,使用动态导入功能时遇到的问题。初始尝试使用`_import`函数动态导入`.vue`组件导致Vite分析错误,通过添加路径前缀`/views/`或使用`import.meta.glob`解决了问题。Vite仅支持一层路径的动态导入限制是问题的关键所在。
摘要由CSDN通过智能技术生成
const _import = (file: String) => () => import(`@/${file}.vue`)
const routes = [
  {
    path: '/',
    name: 'home',
    component: _import('views/home')
  },
]

控制台报错:

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. 

Plugin: vite:import-analysis

或者浏览器控制台报错:

 Unknown variable dynamic import: ../views/home.vue

意思是上面定义使用的_import动态导入函数不能被Vite分析出来,如果一定要这样使用的话,可以使用import ( )调用内部的/ * @ vite-ignore * / 注释来忽略此警告。

随后我用了这个注释后,报错是没有了,但是所需的组件不能动态导入了显示空白。

后来我灵机一动

const _import = (file: String) => () => import(`@/views/${file}.vue`)
const routes = [
  {
    path: '/',
    name: 'home',
    component: _import('home')
  },
]

然后组件就成功展示了。。。。。。。。。

why?????

后官网找到import.meta.glob,改写成这样也可以,但是感觉写路径挺麻烦,还是用第一种吧。

const modules = import.meta.glob('@/views/*.vue')

const routes = [
  {
    path: '/',
    name: 'home',
    component: modlues['/src/views/home.vue']
  },
]

不过还是很好奇为什么第一种多加个路径就能动态导入,跪求大佬解释!!

-----------------------------------------------------------------

碰巧翻文档翻到了

原来vite只支持一层路径。。。。 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值