vue3 + vite 动态加载？

Question

初始：

const lazyLoad = (url: string) => import(`./${url}.vue`);

可以使用，但 vite 有警告：

09:45:57 [vite] warning: invalid import "./${url}.vue". Variable imports cannot import their own directory, place imports in a separate directory or make the import filename more specific. For example: import(`./foo/${bar}.js`).
  Plugin: vite:dynamic-import-vars
  File: D:/NHANH/WJT/project/intelligence-chart/src/components/configItem/config/main.ts

09:45:57 [vite] warning: 
D:/NHANH/WJT/project/intelligence-chart/src/components/configItem/config/main.ts
1  |  import { Eye } from "@vicons/ionicons5";
2  |  const lazyLoad = (url) => import(`./${url}.vue`);
   |                                   ^^^^^^^^^^^^^^
3  |  const Config = {
4  |    echarts: {
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.

移动文件并改为：

const lazyLoad = (url: string) => import(`./config/${url}.vue`);

vite 没有警告了，但浏览器控制台报错：

Uncaught (in promise) Error: Unknown variable dynamic import: ./config/echarts/line/data.vue

或是 不移动 文件改为：

const lazyLoad = (url: string) => import(`../config/${url}.vue`);

都不行，这是为什么？
如何处理？

Answer 1

抄现成的解决方案吧

const modules = import.meta.glob('../views/**/*.{vue,tsx}')

• vue-element-plus-admin/src/utils/routerHelper.ts at master
• RuoYi-Vue3/src/store/modules/permission.js at master
• jeecgboot-vue3/src/router/helper/routeHelper.ts at master