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只支持一层路径。。。。