在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);
            // }
        })
    }
})