vitejs-plugin-vue-route-auto-import
vue3路由自动引入vitejs插件
安装
npm i vitejs-plugin-vue-route-auto-import
使用方法
- vite.config.ts
import {defineConfig} from "vite"
import AutoRoute from 'vitejs-plugin-vue-route-auto-import'
export default defineConfig({
plugins:[
AutoRoute({
/**
* 动态生成的route文件名称,默认输出在根目录,且名称为 route
*/
// route:string
/**
* 动态生成的路由文件后缀名称,默认 ts
*/
// route_suffix:string
/**
* 被监听的动态路由的文件类型,默认为 ["vue","jsx","tsx"]
*/
// suffix:string[]
/**
* 被监听文件类型所属的目录名称,可以指路径写法,默认为 views
*/
// views:string
/**
* 被监听文件类型所属的页面配置文件,默认为 page.json
*/
// pageJson:string
/**
* 扩展路由的文件位置,可实现传统配置写法
*/
// routes_extend?:string
/**
* 自定义路由配置文件位置,可覆盖路由模式等功能
*/
// routesCustomConfig?:string
/**
* 过滤被不需要动态生成的文件路由,默认为禁止弹框相关的文件,即 /\/alert\//
*/
// routesFilter:RegExp | string
})
]
})
- main.ts
import App from "./App.vue"
import route from "./route"
const app = createApp(App)
.use(route)
app.mount('#app')
ts类型兼容请引入
tsconfig.json
{
"compilerOptions": {
// ...
"types": [
//....
"vitejs-plugin-vue-route-auto-import/type"
]
}
}