在vite中根据view中的文件自动生成路由(vue3)

前景提要：在实现这个功能的过程中：我碰到了三个问题
1.在vite中无法使用fs模块
2.vite不支持动态更改，需要去下载插件，其实我下载了还是没有用
3.动态路由中不可以使用别名，因为解析不到

首先展示我是怎么实现的

直接上代码了，注释里面有，主要是要去vite官网学一下glob的用法，我的代码已经尽量精简了，注释掉的代码可看可不看，做实验用的。
这里我封装成了一个方法，但是你需要自己逐步实验
这个文件的文件路径是src/utils/routerGlob.js

export function getRouterList() {// 第一个注意这个文件路径，这里很重要，不然你获取不到const fileObject = import.meta.glob('../views/**/*.vue')let fileList = []for (let fileListItem in fileObject) {let name = fileListItem.replace(/..\/views\//, '').replace(/\/.*.vue/, '').toLocaleLowerCase()// 这里面不能够采用别名，推测是不能解析到// let routerUrl = fileListItem.replace(/../, '@')//为什么要这样子写fileObject[fileListItem],这里的话vite会自动帮你引入这个组件，你不使用vite提供的方法去引入，不好意思，我真没找到其他方法。let routerUrl = fileObject[fileListItem]let listItem = { name, routerUrl }fileList.push(listItem)}return fileList
}

然后是router/index.js


import { createRouter, createWebHistory } from "vue-router"
import { getRouterList } from '../until/routerGlob'
const fileObject = import.meta.glob('../views/**/*.vue')
const fileList = getRouterList()
const routes = [{path: "/",name: "Home",component: () => import("@/views/home/index.vue"),},
]
fileList.forEach(item => {routes.push({path: `/${item.name}`,name: item.name,component: item.routerUrl,})})
console.log(routes)const router = createRouter({history: createWebHistory(),routes
})
router.beforeEach((to, from, next) => {next();
})
export default router

我这样子已经实现了，这是我的git地址

git地址啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，点击这里
然后是那三个问题
1.fs是node的内置模块，除非你自己抄源码过来，重写一遍，可以用。
2.vite中是支持动态更改的，但是你需要用人家的东西Glob这个方法。
3.别名用不了，这就是一个字符，解析不到。

都看到这里了我就补充一下我用fs写的（参考了一下某位大佬的，不过碰到了一丢丢问题，忘记截图错误了，后面都解决了，好像是__dirname不对劲）

//创建文件目录
import fs from 'fs'
import path from 'path'
import {fileURLToPath } from 'url'
//读取的时候要用第二个str,创建,删除的时候用第一个str
// let str = path.join(__dirname, "abc");
const __filenameNew=fileURLToPath(import.meta.url)
const __dirnameNew=path.dirname(__filenameNew)
let str = path.join(__dirnameNew, "../views");
let dirList=[]
//创建文件目录:
/*fs.mkdir(str, function (err) {if (err) {console.log("创建目录失败");} else {console.log("创建目录成功");}
})*///删除文件目录:
/*fs.rmdir(str, function (err) {if (err) {console.log("删除目录失败");} else {console.log("删除目录成功");}
})*///读取文件目录
fs.readdir(str, function (err, files) {if (err) {console.log("读取目录失败");} else {// console.log(files);files.forEach(function (obj) {// 获取每一完整的目录文件// 如果这里的str替换成了__dirnameNew会在当前目录下查找// 这里的第一个参数相当于一个绝对路径，第二个参数相当于在一个绝对路径中进行操作// cd ../views 这样子的一个操作let filepath = path.join(__dirnameNew, '../views/' + obj)// 获取文件状态// let stats = fs.statSync(filepath);// if (stats.isFile()) {//     console.log("是一个文件",obj);// } else if (stats.isDirectory()) {//     console.log("是一个目录",obj);// }})}
})