vue 3 with vite - 动态路径问题的延迟加载答案

【问题标题】：vue 3 with vite - lazy loading with dynamic path problemvue 3 with vite - 动态路径问题的延迟加载
【发布时间】：2022-01-15 21:36:01
【问题描述】：

我正在使用 Vue 3 和 Vite 和 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

问题是 Vue 没有导入 Test 组件

当记录路由时 - 它不处理模板字符串 @/views/${test_Route}/login.vue 它把它当作普通字符串对待

那么如何解决这个问题

【问题讨论】：

标签： vuejs3 vite

【解决方案1】：

请在那里查看我的答案：Vue lazy loading does not work in Vite as did in Vue-CLI

这背后的原因是为了帮助静态分析避免可能的足部射击。所以要导入你的组件，imports 必须以./ 或../ 开头。

所有导入必须相对于导入文件开始。

【讨论】：