这款 Vue 后台框架真神奇，竟然能自动配置路由无需手动？

本文共计1778个文字，预计阅读时间需要8分钟。

前言+做+Vue+开发离不开路由，尤其是大型项目，页面多且复杂，在配置路由的时候总会变得逐渐暴毙，因为耗时，并且没有太多技术含量，总觉得是在浪费宝贵时间。此外，例如接达等。

前言

做 Vue 开发脱离不了路由，尤其是中大型项目，页面多且杂，在配置路由的时候总是会变得逐渐暴躁，因为费时，并且又没有什么太多技术含量，总觉得是在浪费时间。

另外如果接手了别人的项目，当业务有变更，或者测试反馈有 bug 。通常需要先要根据页面 URL 去找到对应配置的路由，然后对照 component 参数对应的 .vue 文件，操作繁琐，效率也不高。

那有没有一种办法可以根据 .vue 文件自动生成路由，并且路由的 path 就是文件所在的文件夹路径，这样即节省了路由配置的时间，也提高了根据 URL 定位页面文件的效率。

经过我的一番查找，还真找到了，就是下面这两个插件：

• vite-plugin-pages
• vite-plugin-vue-layouts

使用 安装

从这两款插件的名字可以看出，这俩是 vite 的插件，并且仅支持 Vue3 ，那我就搬出我的 Fantastic-template 项目模版拿来测试了。

首先先安装依赖。因为模版里自带了 vue-router ，所以不需要再安装。