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

本文介绍: 意思是上面定义使用的_import 动态导入函数不能被Vi t e 分析出来，如果一定要这样使用的话，可以使用 import ( )调用内部的/ * @ vite–ignore * / 注释来忽略此警告。后官网找到 import.meta.g lo b,改写成这样也可以，但是感觉写路径挺麻烦，还是用第一种吧。随后我用了这个注释后，报错是没有了，但是所需的组件不能动态导入了显示空白。不过还是很好奇为什么第一种多加个路径就能动态导入，跪求大佬解释！然后组件就成功展示了。

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

控制台报错：

The above dynamic import cannot b e analyze d b y Vi t e.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats If th i s i s int end e d t o b e left a s–i s, y ou can use th e /* @vite–ignore */ com m ent in s ide th e import() call t o s up pre ss th is warning.

Plugin: vite:import–analy sis

或者浏览器控制台报错：

Unknown var i a ble dynamic i m port: ../views/home.vue

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

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

后来我灵机一动

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

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

wh y？？？？？

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

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

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