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
这里,只是进行一个简单的封装,如果想要进行传值,可以在此基础上进行完善操作✌✌✌✌✌