vite插件

vite插件

编写：自动生成Vue路由：

思路：使用resolveId和load两个钩子函数

load：主要是用来对==文件源码==进行修改的

resolveId：主要是用来匹配文件的

目的：不用手动去配置路由表，实现访问对应文件名路由访问相应的文件

==虚拟模块来生成。==✌✌✌✌

---

首先✌，我们得清楚在路由表中(router/index.js)中的格式是怎么样的，这个插件主要就是往里面动态地去添加内容。

可以看到✌，路由文件中是由import和路由表中的对象组成，这个时候，我们插件的目的就是将我们目录下的文件搞成路由表这样的格式，就不得不使用node中的fs模块了。

vite-plugin-route

import fs from 'fs'
//监听这个目录下的文件
const fileNameArr = fs.readdirSync('./src/components/Children')
// import的文件
const importArr = fileNameArr.map((item) => {
    return `import ${item.split('.')[0]} from '/src/components/Children/${item}'`
})
console.log(importArr.join('\n'));
const routeArr = fileNameArr.map((item) => {
    return ` 
    {
        path: '/${item.split('.')[0]}',
        name: '${item.split('.')[0]}',
        component: ${item.split('.')[0]}
    }`
})
console.log("================");
console.log(routeArr);
console.log("================");

export default function () {
    const virtualModuleId = 'virtual:my-module'
    const resolvedVirtualModuleId = '\0' + virtualModuleId

    return {
        name: 'vite-plugin-route', // 必须的，将会在 warning 和 error 中显示
        resolveId(id) {
            if (id === virtualModuleId) {
                return resolvedVirtualModuleId
            }
        },
        load(id) {
            if (id === resolvedVirtualModuleId) {
                return `
                ${importArr.join('\n')}
                export const routeArr =[${routeArr}]`
            }
        },
    }
}

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import { routeArr } from 'virtual:my-module'
console.log(routeArr);
const routes = [
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    ...routeArr
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

这里，只是进行一个简单的封装，如果想要进行传值，可以在此基础上进行完善操作✌✌✌✌✌