先了解路由对组件的两种加载方式
一 同步加载，这种写法vite2会将组件直接打包进首页，特点是使用简单但不够灵活
import Main from '@msn/main/index.vue'
{path: '/', component: Main, name: 'main'}2.
二 异步加载， 这种写法vite会将组件单独打包，只有在真正使用的地方才加载， 特点是主包大小降低、够灵活但是对组件路径的写法有要求对调试和理解较难
{path: '/', component: () => import('@msn/main/index.vue'), name: 'main'}
// 或者
对于动态路由，肯定是使用第二种写法，因为路由路径和组件路径是通过后台的菜单动态生成的
// 假设菜单信息如下
{id: '1', name: '用户信息'，url: '/core/user'}
// 假设用户组件的文件路径是：/src/views/core/user/index.vue
第一个问题， url作为路由的path，那异步组件的路径是怎样和url对应
// 很多开发容易这样写路由信息
{path: 'core/user', component: () => import(`/src/views/${url}/index.vue`)}
这种写法你会发现根本不能很好地工作， 提示加载不到组件。为了vite在编译期间可以静态分析异步路径所以必须使用相对路径如下：
// 路径要相对于当前编写路由信息的文件的相对路径
// 假设此路由信息所在的文件是： /src/router/index.js
{path: 'core/user', component: () => import(`../views/${url}/index.vue`)}
当你代码敲到这儿， 并且调试的时候很开心的发现可以用了，舒了一口气，心想终于搞定了
第二个问题，按第一种写法vite怎么去查找对应的组件并且单独打包呢
如果views目录下面有多级目录比如：views/a/b/c, views/a/b, views/d/e，很明显vite2并不知道去哪里找组件呢？事实证明在打包的时候并没有生成对应组件的包，且发布之后提示不能加载组件？哎， 心又是一沉，然后疯狂地找资料， 然后终于找到了
https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
根据资料的提示将代码改成：
// 将url进行拆分
let urlPath = url.split('/');
// 静态显示目录级别
{path: 'core/user', component: () => import(`../views/${urlPath[0]}/${urlPath[1]}/index.vue`)}
按上面的写法后发现vite终于为此动态目录下的所有vue组件打包了，发布之后也发现可以了
总结：对于有代码洁癖的开发者，总觉得这种写法限制太多， 如果组件只在一级目录下怎么办， 如果有更好的解决方案欢迎各位同行评论交流