vite-plugin-pages配置浅析
官方文档传送门： vite-plugin-pages
大家好！我是二蛋，前端菜鸡一枚，近期在了解一个开源脚手架vitesse，其中用到了vite-plugin-pages这个插件，简单记录一下各个配置属性的作用以及测试demo，安装方式同学们直接在官方文档看就可以了。有错误欢迎指出（轻点骂，求求了）
再附上我学习这个插件所配置的项目vitesse-route-demo，里面有我一些简单的页面代码，搭配代码看本文效果更佳，可以的话可以点个star
配置属性
本文大部分配置都写在vite.config.ts->defineConfig->plugins->Pages里面
指定需要生成路由的文件夹
类型：string | array
默认路径为 src/pages
Pages({ // default pagesDir: 'src/pages' }) 复制代码可以自行修改
Pages({ pagesDir: [ { dir: 'src/pages', baseRoute: '' }, // src/features/pages文件夹下会生成/features/filename这样的路由 { dir: 'src/features/pages', baseRoute: 'features' }, // 会识别fruits下多个分类下pages的文件 { dir: 'src/fruits/**/pages', baseRoute: 'fruits' }, ], }) 复制代码指定需要生成路由的文件
类型： array
Pages({ // 识别带有vue和md后缀的文件为路由（md文件需要有插件支持） extensions: ['vue', 'md'], } 复制代码加载方式
类型: 'sync' | 'async' | (stirng)=> 'sync' : 'async'
可以直接设定全局的路由加载方式，也可以通过设置syncIndex配置项来转换为同步加载
也可以通过传入一个方法，通过返回 sync 和 async 来确定加载方式
Pages({ importMode: 'async', // 只要包含fruits的路由，就会变为异步懒加载 // importMode(path) { // return path.includes('fruits') ? 'async' : 'sync' // }, }) 复制代码路由块语言类型
类型：string
在使用自动化路由插件之后，我们的一些路由信息就没有写在config文件中了，所以在SFC文件中，可以用route标签来填写一些必要的路由信息。
Pages({ routeBlockLang: 'json5', }) 复制代码默认会使用json5(即我们常见的对象语法)的方式来写
<route> { meta: { layout: 'default' } } </route> 复制代码如果不使用默认，可以自己指定使用yaml的方式编写route代码块
<route> meta: layout: 404 </route> 复制代码
替换方括号（实验中）（看官方issue好像是有问题的，我没有测试成功）
类型： boolean
这个配置是将识别动态路由的 [ ] 换成识别 _ 前缀，跟nuxtjs的风格相似
nuxtStyle路由风格
应该是比较人性化，方便nuxtjs迁移过来？
route处理方法
类型： function
写入之后，我们可以通过这个方法获取到单个路由对象，从而对这个对象进行一定的操作，比如设置身份校验，设置layout
extendRoute(route) { // console.log(route.path) // 这里为了测试这个方法的效果，就是判断一下路由中包含了fruit字符串的，更换layout if (route.path.includes('fruit')) { return { ...route, meta: { layout: 'home' }, } } return route }, 复制代码routes处理方法
类型： function
写入之后，可以获取到完整的array，通过循环遍历获取之后对route进行处理
// 整体处理整个routes的信息，然后进行相应的处理 onRoutesGenerated(routes) { const temp_routes = JSON.parse(JSON.stringify(routes)) temp_routes.forEach((item: any) => { // 这里依然是判断一下路由中包含了fruit字符串的，更换layout if (item.path.includes('fruit')) { item.meta = { layout: 'home', } } }) return temp_routes }, 复制代码clientCode处理方法
类型：function
写入之后可以获取到整个插件渲染之后的代码，这里我们可以在这里通过字符串操作，对这个代码进行最后的拦截处理。
// 这里涉及到更改客户端代码 onClientGenerated(clientCode) { // 能够完整获取到我们实际生成的路由的完整代码，string格式的， // 感觉可以通过正则对这个方法进行替换，或者各种字符串骚操作进行替换 return clientCode }, 复制代码常见使用场景
这一部分可以在文档最后面看到，后期看情况更新
作者：王二蛋
链接：https://juejin.cn/post/7016585379235135496