Vite dynamically imports error reporting, vite configures vue-router, encapsulates dynamic import console error reporting

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

The console reports an error:

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

Or the browser console reports an error:

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

It means that the _import dynamic import function defined above cannot be analyzed by Vite. If you must use it in this way, you can use import() to call the internal /* @vite-ignore */ annotation to ignore this warning.

Then after I used this comment, the error was gone, but the required components could not be dynamically imported and the display was blank.

Then I had a brainstorm

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

Then the component is displayed successfully. . . . . . . . .

why？？？？？

After finding import.meta.glob on the official website, it is also possible to rewrite it like this, but it feels troublesome to write the path, so let’s use the first one.

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

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

But I'm still curious why the first one can be dynamically imported by adding more paths, I beg you to explain! !

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

I happened to flip through the document and found

It turns out that vite only supports one layer of paths. . . .