vue 3 with vite - lazy loading with dynamic path problem

Viewed 982

I am using Vue 3 with Vite with VueRouter

   let test_Route = 'Test';

   const routes = [
       { path: '/' ,     name:'default' ,component: () => import('@/views/login.vue') },
       { path: '/Test' , name:'Test' ,   component: () => import(`@/views/${test_Route}/login.vue`) }
   ]

console.log(routes)
//--the rest of the routing code 

the problem is Vue does not import the Test component

when log routes - it does not process the template string @/views/${test_Route}/login.vue it treats it like its a normal string

so how to fix this

1 Answers

Please check my answer there: Vue lazy loading does not work in Vite as did in Vue-CLI

The reason behind this, is to help static analysis to avoid a possible shoot in the foot. So to import your component, the imports must start with ./ or ../.

All imports must start relative to the importing file.

Related