我怎么早没发现这个库，vite

admin管理员组

文章数量:1029579

我怎么早没发现这个库，vite

前言

上篇文章中介绍了 unplugin-vue-router 和 vite-plugin-vue-layouts 两个十分受欢迎的库，今天我们继续分享另一篇上文提到的库：vite-plugin-pages

正文

vite-plugin-pages 是一个专为 Vite 打造的文件系统路由生成插件，它可以根据 src/pages 下的文件结构自动创建 Vue Router 路由。同样可以搭配vite-plugin-vue-layouts 或 unplugin-vue-router 一起使用！

vite-plugin-pages

vite-plugin-pages

安装非常简单：

代码语言：javascript代码运行次数：0运行复制

npm install vite-plugin-pages -D

然后在 vite.config.ts 中配置：

代码语言：javascript代码运行次数：0运行复制

import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    vue(),
    Pages({
      dirs: 'src/pages',
      extensions: ['vue', 'ts'],
      importMode: 'async',
    }),
  ]
})

vite-plugin-pages 读取指定目录（默认 src/pages）中的 .vue 文件，自动转为 Vue Router 的路由表，省去手动维护的烦恼。例如，页面结构如下：

代码语言：javascript代码运行次数：0运行复制

src/pages/
├── index.vue      → /
├── about.vue      → /about
└── blog/
    └── [id].vue   → /blog/:id

它将会自动生成的路由配置大致是这样：

代码语言：javascript代码运行次数：0运行复制

[
  { path: '/', component: () => import('src/pages/index.vue') },
  { path: '/about', component: () => import('src/pages/about.vue') },
  {
    path: '/blog/:id',
    component: () => import('src/pages/blog/[id].vue')
  }
]

vite-plugin-pages 本质是帮你生成了一个路由表，只需在项目中使用它即可：

代码语言：javascript代码运行次数：0运行复制

// router.ts
import { createRouter, createWebHistory } from 'vue-router'
import routes from 'virtual:generated-pages'

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

然后在 main.ts里这样：

代码语言：javascript代码运行次数：0运行复制

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App).use(router).mount('#app')

与 Vue Router 的集成也非常顺滑，只需要使用：

代码语言：javascript代码运行次数：0运行复制

import routes from 'virtual:generated-pages'

即可获得类型安全的动态路由表。

另外，它还支持：

• 支持路由懒加载
• 支持 TypeScript 自动类型推导
• 变更页面文件会自动热更新路由
• 支持动态路由，
• 支持国际化多语言路径

此外，它还能配合 vite-plugin-vue-layouts 构建布局系统，让你轻松实现多个页面共享相同布局。还支持多语言路径自动扩展、类型推导、热更新等高级特性，非常适合中大型 Vue 项目。

最后

总之，vite-plugin-pages 是 Vue + Vite 项目中提升路由开发效率的不二之选。如果你还在手动写路由，不妨试试它，或许会让你爱不释手！

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-04-20，如有侵权请联系 cloudcommunity@tencent 删除pluginvite布局路由配置

我怎么早没发现这个库，vite

前言

上篇文章中介绍了 unplugin-vue-router 和 vite-plugin-vue-layouts 两个十分受欢迎的库，今天我们继续分享另一篇上文提到的库：vite-plugin-pages

正文

vite-plugin-pages 是一个专为 Vite 打造的文件系统路由生成插件，它可以根据 src/pages 下的文件结构自动创建 Vue Router 路由。同样可以搭配vite-plugin-vue-layouts 或 unplugin-vue-router 一起使用！

vite-plugin-pages

vite-plugin-pages

安装非常简单：

代码语言：javascript代码运行次数：0运行复制

npm install vite-plugin-pages -D

然后在 vite.config.ts 中配置：

代码语言：javascript代码运行次数：0运行复制

import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    vue(),
    Pages({
      dirs: 'src/pages',
      extensions: ['vue', 'ts'],
      importMode: 'async',
    }),
  ]
})

vite-plugin-pages 读取指定目录（默认 src/pages）中的 .vue 文件，自动转为 Vue Router 的路由表，省去手动维护的烦恼。例如，页面结构如下：

代码语言：javascript代码运行次数：0运行复制

src/pages/
├── index.vue      → /
├── about.vue      → /about
└── blog/
    └── [id].vue   → /blog/:id

它将会自动生成的路由配置大致是这样：

代码语言：javascript代码运行次数：0运行复制

[
  { path: '/', component: () => import('src/pages/index.vue') },
  { path: '/about', component: () => import('src/pages/about.vue') },
  {
    path: '/blog/:id',
    component: () => import('src/pages/blog/[id].vue')
  }
]

vite-plugin-pages 本质是帮你生成了一个路由表，只需在项目中使用它即可：

代码语言：javascript代码运行次数：0运行复制

// router.ts
import { createRouter, createWebHistory } from 'vue-router'
import routes from 'virtual:generated-pages'

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

然后在 main.ts里这样：

代码语言：javascript代码运行次数：0运行复制

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App).use(router).mount('#app')

与 Vue Router 的集成也非常顺滑，只需要使用：

代码语言：javascript代码运行次数：0运行复制

import routes from 'virtual:generated-pages'

即可获得类型安全的动态路由表。

另外，它还支持：

• 支持路由懒加载
• 支持 TypeScript 自动类型推导
• 变更页面文件会自动热更新路由
• 支持动态路由，
• 支持国际化多语言路径

此外，它还能配合 vite-plugin-vue-layouts 构建布局系统，让你轻松实现多个页面共享相同布局。还支持多语言路径自动扩展、类型推导、热更新等高级特性，非常适合中大型 Vue 项目。

最后

总之，vite-plugin-pages 是 Vue + Vite 项目中提升路由开发效率的不二之选。如果你还在手动写路由，不妨试试它，或许会让你爱不释手！

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-04-20，如有侵权请联系 cloudcommunity@tencent 删除pluginvite布局路由配置

本文标签： 我怎么早没发现这个库，vite